Vue学习02
计算属性缓存 vs 方法
-- html
<div id="example"> <p>原始消息："{{ message }}"</p> <p>反转消息："{{ reversedMessage }}"</p> </div>
--js
var vm=new Vue({
el:'#example',
data:{
message:'Hello'
},
computed:{
//计算属性的getter
reversedMessage:function(){
//this 指向 vm 实例
return this.message.split('').reverse().join(')
}
}
})
--view
原始消息："Hello"
反转消息："olleH"
上面的计算还可以通过方法实现
--html
<p>方法反转消息: "{{ revesedMessage() }}"
--js
//在组件中
methods:{
reversedMessage : function () {
return this.message.split( '' ).reverse().join( '' )
}
}
这两种方式的最终结果完全相同，区别是计算属性是基于它们的响应式依赖进行缓存的
即只要 message 还没发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不会再次执行函数
而方法每次都会执行 reversedMessage() 重新计算结果
缓存一般用于开销较大的计算，或遍历巨大的数组，如果不希望有缓存，就用方法
Class 与 Style绑定
--html
<div v-bind:class=" { active: isActive } "</div>
--html
<div class='static' v_bind:class="{active:isActive,'text-danger':hasError}"> </div>
--js
data:{
isActive:true,
hasError:false
}
--view
<div class="static" active'></div>
active 这个calss样式的存在取决于isActive=true/false
v-bind:class 可以和普通的class 同存
绑定的数据对象不必内联定义在模板里，还可以返回对象的计算属性：
--html
<div v-bind:class='classObject'></div>
--js
data:{
isActive:true,
error:null
},
coputed:{
classObject:function(){
return{
active:this.isActive && !this.error,
'text-danger':this.error && this.error.type==='fatal'
}
}
}
# 数据语法
--html
<div v-bind:class="[activeClass,errorClass]"></div>
--js
data:{
activeClass:'active',
errorClass:'text-danger'
}
-- view
<div class='active text-danger'></div>
用三元表达式切换class：
--html
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:calss="[{active : isActive}, errorClass]"></div>
绑定内联样式
#对象语法
--html
<div v-bind:style=" color: activeColor, fontSize: fontSize + 'px'"></div>
--js
data:{
activeColor:'red',
fontSize:30
}
直接绑定一个样式对象，让模板更清晰
--html
<div v-bind:style="styleObjct"></div>
--js
data:{
styleObject:{
color:'red',
fontSize:'13px'
}
}
#数组语法
--html
<div v-bind:style="[baseStyles, overridingStyles]"></div>
