模板语法:
1.差值表达式
<div id="root">{{name}}</div>
<Script>
var vm = new Vue({
el:"#root",
data:{
name:"Dell",
}
})
</Script>
2. v-text,和v-html
<div v-text="name"></div>
<div v-html= "name"></div>
3.计算属性:利用{{fullName}},在computed:定义fullName方法。
<div id="root">{{fullName}}</div>
<Script>
var vm =new Vue({
el:"#root",
data:{
firstName:'dell',
lastName:'app',
},
computed:{
fullName:function(){
return this.firstName+ " "+this.lastName;
}
}
})
</Script>
4.计算属性的 getter 和setter,当set获取的值变化时,computed会重新运行一次,使得get返回的值也发生变化。
<div id="root">{{fullName}}</div>
<Script>
var vm =new Vue({
el:"#root",
data:{
firstName:'dell',
lastName:'app',
},
computed:{
fullName:{
get:function(){
return this.firstName+ " "+this.lastName;
},
set:function(value){
var arr=value.split(" ");//打散定义为数组
this.firstName=arr[0];
this.lastName=arr[1];
console.log(value);
}
}
}
})
</Script>