模板语法_计算属性
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
{{message.split('').reverse().join('')}}
<p></p>
{{fun1}}
<p></p>
{{fun1()}}
<p></p>
{{fun3}}
<p></p>
{{fun4}}
<p></p>
{{num}}
<p></p>
{{numGet}}
<p>属性访问{{num}}</p>
<button v-on:click="fun11">Button Add</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vue = new Vue({
el:"#app",
data:{//数据
message:"这是一个 data 中的数据",
num:10,
},
methods:{//方法
fun1:function(){
return this.message;
},
fun2:function(){
return this.message.split('').reverse().join('');
},
fun11:function(){
this.numGeter += 1;
}
},
computed:{//属性
fun3:function(){
return this.message;
},
fun4:function(){
return this.message.split('').reverse().join('');
},
numGet:function(){
return this.num;
},
numGeter:{
get:function() {
return this.num;
},
set:function(vaule){
this.num = vaule;
}
}
}
})
window.onload = function(){
vue.num = 33;
console.log(vue.num);
}
</script>
</body>
</html>
小结：
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
例如： {{}} 内放入了大量的逻辑代码 ==> 过重 难以维护 重用性差
<div id="example">
{{ message.split('').reverse().join('') }}
</div>computed: 属性
属性名称:{
get:function() {
return this.num;//变量
},
et:function(vaule){
this.num = vaule;
}
}