Vue计算属性
当我们需要重复对模板中的属性进行相同的计算后并调用的时候,我们就应该使用计算属性。比如,将字符串进行翻转
<div id="example1"> <p>原始字符串"{{ message }}"</p> <p>翻转后的字符串"{{ reversedMessage }}"</p> </div>
var vm = new Vue({
el: '#example1',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
结果:
这意味着当我们修改message
时,reversedMessage
的值也会跟着变化,可以打开浏览器的console控制台进行属性的修改
- 计算属性与方法
我们也可以通过对模板添加方法来达到以上的效果
method:{
reversedMessage:function () {
return this.message.split('').reverse().join('')
}
}
它们的区别是,多次访问计算属性,在相关响应式的依赖发生变化之前不会再次执行函数,而是会返回之前的函数的计算结果。
例如,在计算属性中添加一个函数:
<p>{{now}}</p>
now:function () {
return Date.now();
}
当初次渲染后,界面如下
在控制台输入语句修改message
的值后,时间并没有变化,因为该函数并不是响应式依赖
而相比之下,方法则会在每次修改属性后都会重新执行一次函数。
- 计算属性与监听属性
当我们的某些数据需要随着其他数据变动而变动,我们可以使用监听属性
例如,当按按钮导致属性改变时,使另外一个属性也随之改变
<div id="example2">
<table>
<tr><th><input type="button" value="0" v-on:click="nums(0)"/></th><th><input type="button" value="/" v-on:click="flags('/')"></th><th><input type="button" value="*" v-on:click="flags('*')"></th><th><input type="button" value="-" v-on:click="flags('-')"></th></tr>
<tr><th><input type="button" value="7" v-on:click="nums(7)"></th><th><input type="button" value="8" v-on:click="nums(8)"></th><th><input type="button" value="9" v-on:click="nums(9)"></th><th><input type="button" value="+" v-on:click="flags('+')"></th></tr>
<tr><th><input type="button" value="4" v-on:click="nums(4)"></th><th><input type="button" value="5" v-on:click="nums(5)"></th><th><input type="button" value="6" v-on:click="nums(6)"></th></tr>
<tr><th><input type="button" value="1" v-on:click="nums(1)"></th><th><input type="button" value="2" v-on:click="nums(2)"></th><th><input type="button" value="3" v-on:click="nums(3)"></th></tr>
</table>
<p>{{result}}</p>
</div>
var ca=new Vue({
el:'#example2',
data: {
flag:' ',
num:0,
result:0
},
methods: {
nums:function(val){
if (this.flag===' '){
this.result=val;
this.num=val;
}else {
this.num=val;
}
},
flags:function (val) {
this.flag=val;
}
},
watch:{
num:function () {
switch (this.flag) {
case "+": this.result+=this.num;break;
case "-": this.result-=this.num;break;
case "*": this.result*=this.num;break;
case "/": this.result/=this.num;break;
default:break;
}
}
}
});
可以进行简单的计算
计算属性的getter
<div id="example3"> <p>{{name}}</p> <p>{{na}}</p> <p>{{me}}</p> </div>
var na=new Vue({
el:'#example3',
data:{
na:'leg',
me:'roft'
},
computed: {
name:{
get:function () {
return this.na+this.me;
},
set:function (newValue) {
let names = newValue.split(' ');
this.na=names[0];
this.me=names[names.length-1];
}
}
}
});
当在控制台修改name
时na
与me
也会改变