Vue.js 监听属性

最新推荐文章于 2024-09-05 14:19:54 发布

随枫潜入夜

最新推荐文章于 2024-09-05 14:19:54 发布

阅读量182

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42243957/article/details/107889842

版权

vue 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。
以下实例通过使用 watch 实现计数器：
在这里插入图片描述

以下实例进行千米与米之间的换算：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
   <body>
      <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
	   <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一个实例方法
		vm.$watch('kilometers', function (newValue, oldValue) {
			// 这个回调将在 vm.kilometers 改变后调用
		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})
      </script>
   </body>
</html>

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。
当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。
其他：
1、通过vue监听事件实现一个简单的购物车

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <table>
    <tr>
        <th>序号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>操作</th>
    </tr>
    <tr v-for="iphone in Ip_Json">
        <td>{{ iphone.id }}</td>
        <td>{{ iphone.name }}</td>
        <td>{{ iphone.price }}</td>
        <td>
        <button v-bind:disabled="iphone.count === 0" v-on:click="iphone.count-=1">-</button>
        {{ iphone.count }}
        <button v-on:click="iphone.count+=1">+</button>
        </td>
        <td>
        <button v-on:click="iphone.count=0">移除</button>
        </td>
    </tr>
    </table>
    总价：${{totalPrice()}}
</div>

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<len;i++) {
        totalP+=this.Ip_Json[i].price*this.Ip_Json[i].count;
      }
      return totalP;
    }


  }
})

table {
    border: 1px solid black;
}
table {
    width: 100%;
}

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

在这里插入图片描述

2、图书购买清单:

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="books">
  <table>
    <tr>
      <th>序列号</th>
      <th>书名</th>
      <th>价格</th>
      <th>数量</th>
      <th>操作</th>
    </tr>
    <tr v-for="book in Books">
      <td>{{ book.id }}</td>
      <td>{{ book.book_name }}</td>
      <td>{{ book.price }}</td>
      <td>
        <button v-on:click="book.count-=1">-</button>
        {{ book.count }}
        <button v-on:click="book.count+=1">+</button>
      </td>
      <td><button v-on:click="book.count=0">移除</button></td>
    </tr>
  </table>
 
<p>总价:{{ totalPrice() }}   <button v-on:click="clear()">移除所有</button>  <button v-on:click="all_add_1()">所有+1</button></p>
</div>

var vm = new Vue({
    el : "#books",        
    data:{            
        Books:[
        {
            id:1,
            book_name:"瓦尔登湖",                    
            price:59,                    
            count:1                
        },                
        {   
            id:2,                    
            book_name:"平凡的世界",                    
            price:74,                    
            count:1
        },                
        {                    
            id:3,                    
            book_name:"红岩",                    
            price:23,                    
            count:1                
        },                
        {                    
            id:4,                    
            book_name:"围城",                    
            price:25,                    
            count:1                
        }            
        ]        
        },        
        methods:{            
            totalPrice:function(){                
                var total_price = 0;                
                for (var i = 0;i<this.Books.length;i ++){                    
                    total_price += this.Books[i].price*this.Books[i].count;                
                }                
                return total_price            
            },            
            clear:function(){                
                for (var i = 0;i < this.Books.length;i++){                    
                this.Books[i].count = 0;                
            }            
            },            
            all_add_1:function(){                
                for (var i = 0;i < this.Books.length;i++){                    
                    this.Books[i].count += 1                
                }            
            }        
        }    
})

table {
    border: 1px solid black;
}
table {
    width: 100%;
}

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

在这里插入图片描述
3、简单省市联动

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
  省份： 
  <select v-model="province">
    <option selected="selected">
      请选择
    </option>
    <option v-bind:value="p" v-for="p in provinces">
      {{p}}
    </option>
  </select>
  城市：
  <select v-model="city">
    <option selected="selected">
      请选择
    </option>
    <option v-bind:value="c" v-for="c in cityList">
      {{c}}
    </option>
  </select>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    city: '请选择',
    province: '请选择',
    provinces: ['广东', '湖南', '湖北', '北京'],
    cityList: [],
    area: [{
      name: '广东',
      id: 1,
      child: ['广州', '深圳', '东莞']
    },
    {
      name: '湖南',
      id: 2,
      child: ['长沙', '株洲', '湘潭']
    },
    {
      name: '湖北',
      id: 3,
      child: ['武汉']
    },
    {
      name: '北京',
      id: 4,
      child: ['北京']
    }]
  },
  watch: {
    province: function(nval, oval) {
      var self = this;
      var cityList = [];
      if (nval == '请选择') {
        this.citylist = [];
      }
      if (nval != oval) {
        for (var i = 0; i < self.area.length; i++) {
          if (self.area[i].name == nval) {
            cityList = self.area[i].child;
          }
        }
        this.city = "请选择";
        this.cityList = cityList;
      }
    }
  }
})