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

Vue实例配置对象

计算属性（computed）

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

总价格为：{{sum}}


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 状态监听（用来监听事件的变化）

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

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

filter 过滤器

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

    

        {{mis | bag}}