Vue实例—— 计算属性（computed）、 watch 状态监听和filter 过滤器

Vue实例—— 计算属性（computed）、 watch 状态监听和filter 过滤器

Vue实例配置对象

选项 说明
data Vue实例数据对象
methods 定义Vue实例中的方法
components 定义子组件
computed 计算属性
filters 过滤器

计算属性（computed）

格式：computed:{ 变量(){ 计算表达式} }

<p>总价格为：{{sum}}</p>


var app=new Vue({
el:"#app",
data:{
price:10,
num:0
},
//按钮事件自增，自减事件
menthods:{
  add:function(){
      this.num++;
  },
   end:function(){
        this.num--;
   },
},
    computed:{
      sum(){
          return this.price*this.num
      }
    }

})

watch 状态监听（用来监听事件的变化）

注意：监听名要与被监听名相同，监听上一个数据，和新的数据。（应用场景：数据发生改变需要保存新数据或者需要查看以前的数据）

<!-- -->
<body>
    <div id="app">
        <input type="text" v-model="name"><br>
        <input type="text" v-model="home">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "上海",
                home:"北京"
            },
            watch: {
                name(newvalue, oldvaule) {
                    console.log("新城市：" + newvalue)           //新的值
                    console.log("旧的城市：" + oldvaule)           //旧的值
                },
                    home(newvalue,oldvaule){
                    console.log("新家：" + newvalue)    //新的值
                    console.log("旧家：" + oldvaule)    //旧的值
                    }
                },
     
        });

    </script>
</body>

     watch: {  
     //简写
     name(newvalue, oldvaule) {
    console.log("新城市：" + newvalue)           //新的值
     console.log("旧的城市：" + oldvaule)           //旧的值
                },
      //全写
      name:{
      immediate:true,  //是否初始化时执行 
       handler(newvalue,oldvalue){
      console.log("新城市：" + newvalue)           //新的值
      console.log("旧的城市：" + oldvaule)           //旧的值
                  }
                }
     }

filter 过滤器

filter 过滤器，（对数进行格式化，比如字符串首字母大写，日期格式化等据）在页面中直接操作数据，返回最终结果。

<body>
    <div id="app">
        {{mis | bag}}
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
              mis: "hello world",         //小写转大写
            },
        filters:{
         bag(value){
         return  value?value.toUpperCase():"" 

         }   
        }
          
        });

    </script>
</body>
posted @ 2022-03-29 23:17  永恒之月TEL  阅读(65)  评论(0)  编辑  收藏  举报