需求:数据msg
值为Hello
,我们现在需要反向显示成olleH
。
方式1:模板中绑定表达式
<div id="box">
{{msg}}
<hr>
{{ msg.split('').reverse().join('') }}
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'Hello'
},
});
</script>
方式2:利用Vue的computed
文档:http://cn.vuejs.org/v2/guide/computed.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{msg}}
<hr>
{{reMsg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:'Hello'
},
computed:{
reMsg:function(){
return this.msg.split('').reverse().join('')
}
}
});
console.log(vm.reMsg); //'olleH'
</script>
</body>
</html>
同样可以通过Vue的实例,获取到该属性:
console.log(vm.reMsg); //'olleH'
但是msg
和resMsg
是有区别的:
可以通过实例对象修改msg
:
console.log(vm.reMsg); //'olleH'
console.log(vm.msg = 'World'); //修改
console.log(vm.reMsg = 'reMsgxxooo '); //不能修改
计算setter
我们刚才已经知道,并没有成功修改reMsg
这个计算属性,那是因为默认只有getter,不过需要的时候我们也可以提供一个setter:
<div id="box">
{{msg}}
<hr>
{{reMsg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:'Hello'
},
computed:{
reMsg:{
get:function(){
return this.msg.split('').reverse().join('')
},
set:function(value){
this.msg = value; //最后修改了msg
}
}
}
});
console.log(vm.reMsg); //'olleH'
console.log(vm.msg = 'World'); //修改
console.log(vm.reMsg = 'reMsgxxooo'); //不能修改
</script>
因为写了setter,这样vm.reMsg = 'reMsgxxooo'
就会调用reMsg
的set函数,最终修改msg
。