watch的使用（以卖座后管系统为例-VUE）

2019-10-19

1. 监听路由

watch: {
  $route(newRoute,oldRoute) {
    // todo
  }
}

//实例
let vm = new Vue({
 el: "#app",
 data: {},
 router,
 watch: {
  '$route.path': function (newVal, oldVal) {
   if (newVal === '/login') {
    console.log('欢迎进入登录页面');
   }
   if (newVal === '/register') {
    console.log('欢迎进入注册页面');
   }
  }
 }
})

watch监听路由.png

2. 深层监听

watch:{
      childrens:{
        handler:function(val,oldval){
          console.log(val.name)
        },
        deep:true//对象内部的属性监听，也叫深度监听
      },
 }

3. 立即执行

 poster: {
 handler(newName, oldName) {
   // ...
 },
 immediate: true
  }

Vue.js 简单购物车-(例子)

//html文件----------------------------------------------------------------------------------------------------------------------


    

    

        
序号
        
商品名称
        
商品价格
        
购买数量
        
操作
    
    

        
{{ iphone.id }}
        
{{ iphone.name }}
        
{{ iphone.price }}
        

        -
        {{ iphone.count }}
        +
        
        

        移除
        
    
    
    总价：${{totalPrice()}}


//css文件----------------------------------------------------------------------------------------------------------------------
table {
    border: 1px solid black;
}
table {
    width: 100%;
}

th {
    height: 50px;
}
th, td {
    border-bottom: 1px solid #ddd;
}

//js文件
var app = new Vue({
  el: '#app',
  data: {
    Ip_Json: [{
      id: 1,
      name: 'iphone 8',
      price: 5099,
      count: 1
    },
              {
                id: 2,
                name: 'iphone xs',
                price: 8699,
                count: 1
              },
              {
                id: 3,
                name: 'iphone xr',
                price: 6499,
                count: 1
              }]
  },
  methods:{
    totalPrice : function(){
      var totalP = 0;
      for (var i = 0,len = this.Ip_Json.length;i