Vuejs——(3)计算属性,样式和类绑定
版权声明:出处http://blog.csdn.net/qq20004604
先上总结:
(十九)标签和API总结(2)
vm指new Vue获取的实例
①当dom标签里的值和data里的值绑定后,更改data对应的值可以实时更新标签里的值;
但后续添加的值是无效的(绑定失败)。
②将可以将对象直接作为data的一个属性,是有效的(因为对象按值传递);
所以该属性和该对象是全等的;
③vm的接口有:
vm.$data是vm的data属性;
vm.$el是el属性指向的dom结点;
vm.$watch是监视属性变化(比如data里的值)(参照(九))
④vue实例的声明周期,有几个关键函数:
created:事件绑定结束后,函数直接在声明vue实例的时候,作为vue实例中的一个属性,下同。
vm.$mount:挂载dom结点;
beforeCompile:加载模板之前;
compiled:加载模板之后;
ready:完成之后(我猜的);
beforeDestroy:摧毁之前;
destroyed:摧毁之后;
⑤vm.$mount(挂载的id或者类名)
在new Vue实例的时候,不加el,则表示不挂载只生成,生成之后,可以通过该方法来手动挂载到某个地方,如果符合条件的有多个,则挂载到第一个地方;
⑥v-for遍历数组、对象,可以创建多个标签;比如用于创建表格;
⑦转义:{{}} 两个大括号,不会转义值的html标签;
{{{}}} 三个大括号,会将值的html标签转义,即变为html文本;
不能在值内再放入绑定数据(除非使用partials,但我还不会);
⑧在插值的大括号内,可以放入表达式(不能放函数);
⑨在插值的大括号内,加入管道符|,可以使用过滤器;
capitalize就是将首字母大写的过滤器;
过滤器只能放在表达式最后,不能成为表达式的一部分;
过滤器可以加参数;
过滤器可以自定义(但目前还不知道自定义的方法);
⑩指令:
v-if=”变量名” 当某个值为true时存在;
v-bind:属性名=”变量名” 将等号后的变量名(指向vm的data属性里的同名属性),和该标签的html属性绑定在一起。
v-on:事件类型=”函数名” 触发事件类型时,执行methods里的函数;
v-on的缩写是@;v-bind的缩写是:(冒号);
⑪计算属性computed
这里的属性,可以当做data属性里的使用;优点是data里的数值变更时,这里会跟着一起改变;
可以使用更复杂的表达式(插值里只能使用简单的表达式);
⑫计算属性的setter和getter
默认是getter(对象的get属性),即当某个值改变时,触发回调函数(或get方法);
当计算属性改变时,需要改变某些值(比如改变10个值,在其他地方写监听这个值就不好),那么则需要设置setter(对象的set属性),即当计算属性改变时,触发set方法;
⑬监视属性vm.$watch(被监视的属性, 回调函数)
监视的是data属性;
回调函数的第一个参数是改变后的值,第二个参数是改变前的值;
属性的值改变时触发;
⑭class绑定:
用v-bind:class
class使用对象形式,key为class类名,值表示是否显示这个class类;
可以直接将一个object对象放置在v-bind:class的值中,并将这个对象放置在data属性中,这样设置这个object对象的属性即可;
class的数组写法:数组里的成员为变量名,如果该变量不是object对象,则变量的值为类名;如果是对象时,对象的key是类名,值表示是否显示;
⑮style绑定:
用v-bind:style
形式是一个对象,对象的key是样式名(如fontSize,注意样式名需要采用驼峰式而不是css式),值是样式的值;
可以直接将对象名放在v-bind:style的等式右边;
对象的值改变,将实时影响内联样式;
对于某些样式,可以针对浏览器加前缀(但某些不能对所有浏览器兼容);
(十七)计算属性
①简单来说,假如data里面有属性a=1,然后你需要一个变量跟着a变化,例如b=a+1,那么就需要用到计算属性,Vue实例的computed属性中,设置b为其属性,其表现为一个函数,返回值是b的值。
具体见代码:
- <div id="app">
- <table>
- <tr>
- <td>a</td>
- <td>b=a+1</td>
- </tr>
- <tr>
- <td>{{a}}</td>
- <td>{{b}}</td>
- </tr>
- </table>
- <button @click="add">a = a + 1</button>
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- a: 1
- },
- methods: {
- add: function () {
- this.a++;
- }
- },
- computed: {
- b: function () {
- return this.a + 1;
- }
- }
- })
- </script>
效果:
初始a的值为1,b的值为2。
点击按钮,会让a的值增加1(注意,没有动b的值)。
但由于b和a是相关的(这里的this.a指的是a),因此,在a的值改变后,b的值也会跟着改变。
之所以这么做,回想一下,Vuejs禁止在变量绑定时输入一个函数,因此如果表达式比较复杂,那么就必须这么做,好处是可以防止模板太重(放很大的表达式在模板中)。
②vm.$watch(“属性”, function(newVal, oldVal){
//回调函数的具体内容
})
用于观察Vue实例上的数据变动;
【1】可以监视data属性中的某个属性(比如上面的a);
【2】可以监视computed属性中,某个属性的值,例如上面的b;支持字符串的变化,如代码:
- var vm = new Vue({
- el: "#app",
- data: {
- a: 1
- },
- methods: {
- add: function () {
- this.a++;
- }
- },
- computed: {
- b: function () {
- var str = "";
- for (var i = 0; i < this.a; i++) {
- str += String(i);
- }
- return str;
- }
- }
- })
- vm.$watch("b", function (val) {
- alert(val);
- })
这里的监视b是有效的。
但假如b返回的是一个固定的字符串,或者值,那么则不会触发(因为值没有改变)
【3】另外,在$watch的回调函数中,第一个参数val的值是新值(即变动后的值),他也可以有第二个参数,而第二个参数的值是旧值(即变动前的值)。
【4】watch的回调函数里,this指向的是vm这个对象;
③setter
计算属性默认是getter(写作get),可以这么理解,他监视某个值,那个值变化时会触发这个回调函数;
但也可以设置为setter(写作set),setter和getter的区别在于,setter是当computed这个属性的值变化时所触发的。例如:
- <div id="app">
- <input v-model="firstName"/>
- <input v-model="lastName"/>
- <input v-model="fullName"/>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- firstName: 'Foo',
- lastName: 'Bar'
- },
- computed: {
- fullName: {
- // getter
- get: function () {
- return this.firstName + ' ' + this.lastName
- },
- // setter
- set: function (newValue) {
- var names = newValue.split(' ')
- this.firstName = names[0]
- this.lastName = names[names.length - 1]
- }
- }
- }
- })
- </script>
我们修改前两个输入框的值,将影响第三个输入框的值;
我们也可以修改第三个输入框的值,来影响前两个输入框的值。
另外,由于这种绑定形式,我们将无法让fullName的名字是三个单词,原因在于,set触发了lastName的改变(获取最后一个单词),而lastName的改变又会触发getter(将firstName和lastName拼接起来),因此只会保留第一个单词和最后一个单词。
(十八)Class和Style绑定
①简单来说,就是用一个变量来控制某个class是否存在与dom之中,这样不需要直接操纵dom的class属性。
如果不想要他影响某个属性,那么就将他放在class里面,而不是绑定的class里面。
具体方法如下,将以下内容放到html标签里:
- v-bind:class="{'green':a,'red':b}"
效果是,假如变量a的值是true(或者可以被隐式转换为true),那么class属性里则添加green,如果b为true,那么red也会被添加。注意,这二者不是互斥的。
如代码:
- <style>
- .green {
- background-color: green;
- }
- .red {
- background-color: red;
- }
- </style>
- <div id="app">
- <div v-bind:class="{'green':a,'red':b}">背景颜色</div>
- <button @click="change">变色</button>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- a: true,
- b: false
- },
- methods: {
- change: function () {
- this.a = !this.a;
- this.b = !this.b;
- }
- }
- })
- </script>
效果:
点击按钮可以变换a和b的值,从而可以带动class的变化,于是背景颜色也会变。
②另外一种绑定方法,将class的值放置在data里。
方式:
- <div v-bind:class="itsClass">背景颜色</div>
- //略
- data: {
- itsClass: {
- green: true
- }
- },
即将变量名放在指令里,然后通过修改属性的值来控制class
优点:
如果需要添加一个class时,只需要在变量里添加属性,并设置该属性为true即可。相对来说更加自由。
如代码:
- <div id="app">
- <div v-bind:class="itsClass">背景颜色</div>
- <button @click="change">变色</button>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- itsClass: {
- green: true
- }
- },
- methods: {
- change: function () {
- this.itsClass.green = false;
- this.itsClass.red = true;
- }
- }
- })
- </script>
点击按钮,虽然原本itsClass这个变量并没有red这个属性,但后续添加这个属性也会在该div里添加red这个class类名。所以,背景颜色从绿色变为红色。
进阶使用:
假如需要当一个值存在时,拥有特殊的样式,那么这个值的变量名可以和样式名一致,并通过这样的方式,当该值存在时,其被隐式转换为true,因此样式为我们需要的样式。
③class的数组语法和表达式:
写法:
- <div v-bind:class="[g,r?r:s]">颜色</div>
效果:
g、r、s都是变量名,使用的时候取该变量的值;
如代码:
- <style>
- .fontGreen {
- color: green;
- }
- .backRed {
- background-color: red;
- }
- .fontSize {
- font-size: 50px;
- }
- </style>
- <div id="app">
- <div v-bind:class="[g,r?r:s]">颜色</div>
- <button @click="change">变换</button>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- g: "fontGreen",
- r: "backRed",
- s: "fontSize"
- },
- methods: {
- change: function () {
- this.r = false;
- }
- }
- })
- </script>
首先他是数组,因此第一个g存在,因此他有样式名fontGreen,其次,是一个三元表达式,他会判断r的值,如果为true(或隐式转换为true),那么就绘将r的值添加到数组,否则添加s的值。
因此,初始表现是绿色红色背景;点击按钮后,显示的是绿色的大字体。
④在1.0.19+版本里,可以在数组语法中使用对象。
数组格式如下:
- <div v-bind:class="[classG, {R:classR,S:classS}]">颜色</div>
data属性如下:
- data: {
- classG: "G",
- classR: true,
- classS: true
- },
解释:
【1】 数组形式(如classG),需要放置的是变量名,类名是变量名的值;
【2】 对象形式(如{R:classR,S:classS}),对象的key是类名,value用于控制该类是否存在(true或者false);
⑤绑定内联样式:
格式:
- <div v-bind:style="{fontSize:TheSize}">内联样式</div>
【1】 首先,其内是一个对象,key为样式名(如fontSize),value为样式的值(如TheSize,他是data里面的一个变量);
【2】 其不是css,因此不能像css那样写,事实上是一个js的对象,需要采用驼峰写法(教程说可以用短横分隔符命名,但我失败了,例如font-size是不行的);
【3】 可以直接将变量(如果是一个有效对象)放置在这里,例如:
- <div id="app">
- <div v-bind:style="TheStyle">内联样式</div>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- TheStyle: {
- fontSize: "30px",
- color: "red",
- backgroundColor: "#aaa"
- }
- }
- })
- </script>
渲染结果是:
- <div style="font-size: 30px; color: red; background-color: rgb(170, 170, 170);">内联样式</div>
【4】 另外,假如绑定的对象的值被更改,那么内联样式也会被实时更改。
⑥内联样式的数组写法:
非常简单,使用数组,然后把对象放在其中即可。
例如:
- <div v-bind:style="[TheStyle, AnotherStyle]">内联样式</div>
- //略
- data: {
- TheStyle: {
- fontSize: "30px"
- },
- AnotherStyle: {
- color: "red",
- backgroundColor: "#aaa"
- }
- },
该div会自动合并两个对象的值并添加到标签中。
唯一需要注意的是,假如有一个对象的值是无效的,那么这个标签的其他对象的值也无法作用到标签上。
⑦内联样式的自动添加浏览器前缀适应:
最简单的例子,滤镜功能在chrome下是必须添加-webkit-前缀的,否则无效,但IE下无需添加。
- <div v-bind:style="TheStyle">内联样式</div>
- //略
- TheStyle: {
- filter: "grayscale(1)"
- }
在chrome浏览器下,变为:
-webkit-filter: grayscale(1);
在Edge浏览器下变为:
filter: grayscale(1)
但是在IE11和firefox48的情况下,他是不能正常工作的。
所以个人觉得还是不要指望他了吧。
Vuejs——(3)计算属性,样式和类绑定的更多相关文章
- No.3一步步学习vuejs之计算属性和观察者
一.计算属性运行结果 <div id = "demo1"> <p>Original message: "{{message}}"< ...
- VueJs(7)---计算属性和侦听器
计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...
- Vue中计算属性与class,style绑定
var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...
- 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Swift编程语言学习9—— 存储属性和计算属性
属性将值跟特定的类.结构或枚举关联.存储属性存储常量或变量作为实例的一部分,计算属性计算(而不是存储)一个值.计算属性能够用于类.结构体和枚举里,存储属性仅仅能用于类和结构体. 存储属性和计算属性通经 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- v-bind绑定属性样式
一.class的四种绑定方式 1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{'class-a':isA ...
随机推荐
- 优化 SQL SELECT 语句性能
SELECT语句的性能调优有时是一个非常耗时的任务,在我看来它遵循帕累托原则.20%的努力很可能会给你带来80%的性能提升,而为了获得另外20%的性能提升你可能需要花费80%的时间. 检查索引:在SQ ...
- a.vim 插件
引用自 https://blog.csdn.net/zhangsming/article/details/42652695 vim插件之快速切换头(.h)/源(.c,.cpp,.cc)文件——a.v ...
- kettle实现同构单表增量同步
job如下: 如下转换:获取区服列表,将id列表保存到结果(内存) job: 同构数据库单表抽取(每个输入执行一次) 同构数据库单表抽取(job) 的具体实现如下: 转换:获取数据库连接ID 从结果获 ...
- 4-29 c语言之栈,队列,双向链表
今天学习了数据结构中栈,队列的知识 相对于单链表来说,栈和队列就是添加的方式不同,队列就相当于排队,先排队的先出来(FIFO),而栈就相当于弹夹,先压进去的子弹后出来(FILO). 首先看一下栈(St ...
- 001之IP基础对话框
在TCP/IP协议中,建立连接的两个进程(客户端和服务器)各自用一个socket(IP地址+TCP/UDP端口号)标识.在MFC中流式套接字(SOCK_STREAM)和数据报套接字(SOCK_DGRA ...
- 尚硅谷springboot学习31-jdbc数据连接
可以使用JdbcTemplate操作数据库,可以在启动的时候自动建表,更新数据表 配置依赖 <dependency> <groupId>org.springframework. ...
- js实现图片上传预览功能,使用base64编码来实现
实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...
- 记一次线上bug排查-quartz线程调度相关
记一次线上bug排查,与各位共同探讨. 概述:使用quartz做的定时任务,正式生产环境有个任务延迟了1小时之久才触发.在这一小时里各种排查找不出问题,直到延迟时间结束了,该任务才珊珊触发.原因主要就 ...
- Django 的ORM 数据操作
from teatcher.models import Student 导入app(teatcher)下的模型(Student) In [11]: res = Student.objects ...
- sed (未完,待续)
sed [options] 'command' file(s) options: -e<script>或--expression=<script>:以选项中的指定的script ...