Vue.js 初步入门
computed
:计算属性,在处理一些复杂逻辑时是很有用。
我们在处理一些字符串或者一些表达式的计算的时候,写在插值表达式或者data域中是非常复杂且不美观的,比如这个:
{{"abcde".toLocaleUpperCase()}}
data:{
result1:"abcde".toLocaleUpperCase()
}
甚至可以写个方法来计算:
methods:{
result2(){
return "abcde".toLocaleUpperCase();
}
}
vue提供了computed
关键字来提供这类问题的解决方案:
使用详情
以后凡是涉及到处理一些复杂逻辑的问题,都可以使用这一个关键字:
computed:{
result3:function(){
return "abcde".toLocaleUpperCase();
}
}
效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
如上声明了一个计算属性 result3。
提供的函数将用作属性 vm.result3的 getter 。
computed 属性默认只有 getter,不过在需要时你也可以提供一个 setter :
data:{
msg:'abcde'
}
computed:{
result3:{
get:function(){
return msg.toLocaleUpperCase();
},
set:function(strValue){
this.msg = strValue;
}
}
}
若把vue实例传递给它的引用,给相应元素赋值时,set会得到调用:
let vm = new Vue({...});
vm.result3 = 'qwert';