Vue第十四天（响应接口）

准备步骤如同第一天

代码：（测试注意事项：js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
</head>
<body>
<!--$watch 属性来实现数据的监听-->
<div id="app1">
    <p style="font-size: 25px">计数器：{{count}}</p>
    <button @click="count++" style="font-size: 25px">测试按钮</button>
</div>
<br>

<div id="app2">
    <p style = "font-size:25px;">计数器: {{ products.id }}</p>
    <button @click = "products.id++" style = "font-size:25px;">测试按钮</button>
</div>
<br>

</body>
<script>
    /*$watch 属性来实现数据的监听*/
 /*   var vm=new Vue({
        el:'#app1',
        data:{
            count:1
        }
    });
    vm.$watch('count',function (nval,oval) {
        alert('计数器变化：'+oval+'变为'+nval+'!')
    });
    setTimeout(
        function () {
            vm.count=20;
        },2000
    );*/

    var myproduct = {"id":1, name:"book", "price":"20.00"};
    var vm = new Vue({
        el: '#app2',
        data: {
            counter: 1,
            products: myproduct
        }
    });
    vm.products.qty = "1";
    console.log(vm);
    vm.$watch('counter', function(nval, oval) {
        alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
    });
</script>
</html>

中的代码依次开启测试，不可全部开启，会报错）

Vue第十四天（响应接口）

猜你喜欢