vue学习 watch监听 

watch:{
            'name':{
                deep:'true',
                handler:function(New,old){
                    console.log(New);
                }
            }
        }

　　监听函数前后的变化

 1 const vm = new Vue({
 2         el:'#app',
 3         data:{
 4             msg:'hello',
 5             msg2:'world'
 6         },
 7         methods: {
 8             click:function(){
 9                 this.msg='你是谁'
10             }
11         },
12         computed:{
13             name:function(){
14                 return this.msg +' '+ this.msg2
15             }
16         }
17     })

这个是监听值得变化。

 

vue中的过滤器

 1 <body>
 2     <div id="app">
 3         <p>{{price | myPrice}}</p>
 4     </div>
 5     
 6 </body>
 7 <script src="./vue.js"></script>
 8 <script>
 9     const vm = new Vue({
10         el:'#app',
11         data:{
12             price:10,
13         },
14         filters:{
15             myPrice:function(price){
16                 return '$' + price;
17             }
18         }
19     })
20 </script>
<body>
    <div id="app">
        <p>{{price | myPrice('¥')}}</p>
    </div>
    
</body>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            price:10,
        },
        filters:{
            myPrice:function(price,a){
                return a + price;
            }
        }
    })
</script>

可以传入两个参数，跟换种类

 

posted @ 2021-04-20 21:45  竹石2020  阅读(61)  评论(0)    收藏  举报