需求：數據msg值為12345，我們現在需要反向顯示成54321。
在模板中綁定表達式是非常便利的，但是它們實際上只用於簡單的操作。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
<!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>
{{ msg.split('').reverse().join('') }}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:'12345'
}
});
console.log(vm.reMsg);
</script>
</body>
</html>
Vue提供computed的方式。例如：
<!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:'12345'
},
computed:{
reMsg:function(){
return this.msg.split('').reverse().join('')
}
}
});
console.log(vm.reMsg);
</script>
</body>
</html>
同樣的可以達到效果！
- 但是這邊的reMsg是不能被修改的！！ 也就是修改的時候他不會按照我們js給的規則去向反顯示，因為默認只有getter，我們可以提供一個setter:
<!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:'12345'
},
computed:{
reMsg:{
get:function(){
return this.msg.split('').reverse().join('')
},
set:function(value){
this.msg = value; //最后修改了msg
}
}
}
});
console.log(vm.reMsg = 'abcd'); //當我們修改這個變量的時候他的值也是跟隨着我們js規則反向顯示
</script>
</body>
</html>