zoukankan      html  css  js  c++  java
  • 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 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
        }
    });
    //oval为当前值 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>
    

      

  • 相关阅读:
    POJ 1129 深搜&四色染图&模拟
    POJ 1011 很经典的树枝拼凑的深度搜索
    HDU 2564 词组缩写
    Java中的split函数的用法
    java中next和nextline的区别
    简探this和super
    再探Java中的继承加载顺序
    Java面向接口编程小例子 2
    Dos命令整理集(持续更新)
    VMware WorkStation9.0虚拟机如何运行WINPE
  • 原文地址:https://www.cnblogs.com/cainame/p/12008274.html
Copyright © 2011-2022 走看看