夜光带你走进Vue.js（十七）擅长的领域

最新推荐文章于 2024-06-08 22:56:05 发布

GeniusTeam-夜光

最新推荐文章于 2024-06-08 22:56:05 发布

阅读量129

点赞数

分类专栏： Genius-Vue.js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102450892

版权

Genius-Vue.js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

有些人，总在时间的推移下，渐渐露出马脚。你能演一时的戏，却不能演一辈子，谎言与假面，在时间面前都无处遁形。

正文：Vue.js 监听属性

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。

以下实例通过使用 watch 实现计数器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id = "app">
    <p style = "font-size:30px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:30px;">点我</button>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            counter: 1
        }
    });
    vm.$watch('counter', function(nval, oval) {
        alert('嗯唔，计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id = "computed_props">   <!--id很重要-->
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>

<script src="../js/vue.js"></script>
<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>