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>