vue 定义返回result_（四）vue过滤器及数据监听

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中任何一个值，折后价会自动调整。