Filter Properties: filters:
<div id = "app">
{{num}}<br>
{{num | toInt}}<br>
{{num | toFloor}}<br>
{{num | toCeil}}<br>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
num:'3.45',
},
// 过滤器
filters:{
toInt(value){
return parseInt(value);
},
toFloor(val) {
return Math.floor(val);
},
toCeil(val) {
return Math.ceil(val);
}
}
})
</script>
Calculation of property: computed
<div id = "app">
{{num1}} + {{num2}} = {{sum}} <br>
{{num1}} - {{num2}} = {{subt}}
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
num1:3,
num2:2,
},
// 计算属性
computed:{
sum(){
return this.num1+ this.num2;
},
subt(){
return this.num1- this.num2;
}
}
});
</script>
Method properties: methods
observe the changes: watch
<div id ='app'>
<p> a: {{a }}</p>
<button v-on:click="plus">+1</button>
<button v-on:click="to0">归0</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
a: 0
},
methods:{
plus():{
return this.a++;
},
to0():{
return this.a = 0;
}
},
watch:{
a(){
alert('变化了!!!');
}
}
});
</script>
// 注:点击+1按钮时,直接执行plus函数.
// 使用watch观察a的值是否发生变化
