计算属性与观察者
模板内的表达式非常便利,但是设计他们的初衷是用来简化运算的。在模板内放入太多的逻辑会让代码难以维护
所以当我们要使用复杂逻辑的时候我们最好使用计算属性
<div id="example">
<p>原始:{{message}}</p>
<p>翻转后:{{reverseMessage}}</p>
</div>
//JS代码
var text=new Vue({
el:"#example",
data:{
message:"Hello myWorld"
},
computed:{
reverseMessage:function(){
return this.message.split("").reverse().join("");
}
}
});
那么这里有一个很关键的点,就是 computed和methods有什么区别
- computed是基于他们的依赖进行缓存的,也就是说,在使用computed计算属性的时候,只要他的依赖值没有改变,他就会立即返回之前的计算结果,而不是再次执行函数
- methods方法在我们每次触发重新渲染的时候,调用方法总会执行该函数,并且methods需要调用里面的方法。
当我们有一个非常复杂的逻辑运算的时候,我们应该使用computed来优化,当然,如果你不希望缓存,请使用methods
watch侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性,但是你很容易滥用这种属性
<div id="name">
<p>{{fullName}}</p>
</div>
//JS代码
var name=new Vue({
el:"#name",
data:{
firstname:"Liu",
lastname:"Xiang",
fullname:"LiuXiang"
},
watch:{
firstname:function(val){
this.fullname=val+" "+this.lastname
},
lastname:function(val){
this.fullname=this.firstname+" "+val
}
}
})
我们可以用计算属性来改写这个侦听属性
<div id="name">
<p>{{fullname}}</p>
</div>
//JS
var name=new Vue({
el:"#name",
data:{
firstname:"Liu",
lastname:"Xiang"
},
computed:{
fullname:function(){
return this.firstname+" "+this.lastname
}
}
})
Style和Class绑定
//css
.heightLight{background-color:red;}
//HTML
<div id="app">
<p v-bind:class="{heightLight:open}">hello,vue</p>
</div>
//JS
var app=new Vue({
el:"#app",
data:{
open:true
}
})
这样做有一个强大的地方就是可以通过计算属性来是否呈现该类
<div id="app">
<p v-bind:class="classObject">hello</p>
</div>
//JS
var app=new Vue({
el:"#app",
data:{
isActive:true,
error:null
},
computed:{
classObject:function(){
return {
heightLight:this.isActive&&!this.error
}
}
}
})
数组语法
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:,因为这个定义我们能通过多种方式来动态改变我们所需要的类
//css
.heightLight{
background-color: red;
}
.border{
border: solid 2px red;
}
//html
<div id="app">
<p v-bind:class="[isActive?heightLight: ' ',border]">hello</p>
</div>
//JS
var app=new Vue({
el:"#app",
data:{
isActive:false,
heightLight:"heightLight",
border:"border"
}
})
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。
<div v-bind:style="{fontSize:font+"px"}">Hello</div>
//JS
var font=new Vue({
el:"#font",
data:{
font:22
}
})
上面的代码可以改写为,当我们要添加多个属性的时候,会更加方便
<div v-bind:style="classList" id="font">Hello</div>
//JS
var font=new Vue({
el:"#font",
data:{
classList:{
fontSize:"22px"
}
}
})