1、过滤器filter
filter有全局和组件内
全局定义Vue.filter('discount',过滤器方法)用于显示折扣价
组件内定义 filters:{ showprice,过滤器方法 }用于显示将万元转化为元
使用 {{ price | 过滤器方法 }},对price参数进行加工处理后返回输出
<div id="app">
<div>
单向绑定:<input type="text" :value='price'/>万元<br/>
双向绑定:<input type="text" v-model='price'/>万元<br/>
价格:{{ price }}万元<br/>
价格:{{ price | showprice }}元<br/>
85折后价:{{ price | discount }}元<br/>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
price:'123'
},
watch:{
}
})
</script>
2、监听watch和computed
使用watch监听price对象,深度监听必须使用handler方法和deep:true,handler参数newval和oldval,可以取到新数据和旧数据。
computed用于监听result方法内每一个计算数据的变化,变化后返回最新值
<div id="app">
<div>
价格:<input type="text" v-model='price'/>元<br/>
折扣:<input type="text" v-model='discount'/>%<br/>
折后价:{{ result }}元<br/>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
price:'6000',
discount:'85'
},
watch:{
price:{
handler(newval){
if(newval>10000){
alert('价格为'+newval+'元,高于10000元!打五折')
this.discount='50'
}
},
deep:true
}
},
computed:{
result(){
return this.price*this.discount/100
}
}
})
</script>
运行显示:
示例中watch监听价格,跳出弹窗显示超过10000的产品打5折,并修改discount
computed监听折后价,修改price和discount中任何一个值,折后价会自动调整。