（8）打鸡儿教你Vue.js

╰半夏微凉° 2021-09-20 13:46 268阅读 0赞

监听属性

监听属性 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;
        }
    }

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[image.png]: /images/20210724/e5754521ad4b434c84d680761a501b3c.png
[1240]: /images/20210724/19cc395239a7487d9a40f043c16e2650.png
[1240 1]: /images/20210724/382b99d3ca854df996400f2699b3e3fc.png