个性化阅读
专注于IT技术分析

一个例子搞定!VueJS监控属性watch用法和例子详解

上一节中,我们学习了VueJS计算属性computed的用法,包括computed自动计算属性、computed和methods的区别以及computed中的set和get方法。在本节我们将学习VueJS的监听属性功能,监听属性的使用比较简单,使用Vue的watch属性实现,下面我们看一个例子:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS监听属性使用</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        公里:<input type="text" v-model="kilos">
        米  :<input type="text" v-model="meters">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                kilos: 0,
                meters: 0
            },
            methods: {},
            computed: {},
            watch: {
                kilos: function(value){
                    this.kilos = value;
                    this.meters = value * 1000;
                },
                meters: function(value){
                    this.kilos = value / 1000;
                    this.meters = value;
                }
            }
        });
    </script>
</body>
</html>

在上面的代码中,我们创建了两个输入框,一个是kilos公里,第二个meters是米,这里实现公里和米的转换。在Vue的data中,这两个属性初始化为0,在Vue的watch的属性中有两个方法:kilos和meters,这两个函数实现公里和米的互相转换。

当我们在两个输入框中的一个输入数字的时候,另一个会有相应的改变,watch负责这背后的更新,我们不需要专门分配任何事件,或等待它的更新和执行额外的验证工作,只需使用watch内用各自函数中的计算更新文本框。

下面是浏览器的初始输出:

VueJS监控属性watch初始化

在公里的文本框中输入数字,米的文本框中会有变化,如下:

VueJS监控属性watch输入数字查看更新

在米的输入框中输入,查看公里输入的变化,如下:

VueJS监控属性watch查看更新
赞(0) 打赏
未经允许不得转载:srcmini » 一个例子搞定!VueJS监控属性watch用法和例子详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏