（8）打鸡儿教你Vue.js

监听属性

监听属性 watch
通过 watch 来响应数据的变化

<div id = "app">    <p style = "font-size:25px;">计数器: {{ counter }}</p>    <button @click = "counter++" style = "font-size:25px;">点我</button></div><script type = "text/javascript">var vm = new Vue({    el: '#app',    data: {        counter: 1    }});vm.$watch('counter', function(nval, oval) {    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');});</script>

<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>

image.png

<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>

table {    border: 1px solid black;}table {    width: 100%;}th {    height: 50px;}th, td {    border-bottom: 1px solid #ddd;}

{{totalPrice()}}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;    }}

请点赞！由于你的鼓励是我写作的最大动力！

官方微信公众号

吹逼交流群：711613774

吹逼交流群