Vue中Watch使用案例

最新推荐文章于 2022-11-28 17:50:11 发布

海涛高软

最新推荐文章于 2022-11-28 17:50:11 发布

阅读量1k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_15267341/article/details/100108361

版权

VUE 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

Watch有两种使用形式，如下，下面这个案例，实现firstname输入框值动时，lastname输入框中值跟着动,实现lastname输入框中输入值时，fisrtname值跟着动

Watch起着监听的作用，始终监视某个对象，对象发生变化时，触发相应的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/vue.js"></script>
</head>
<!--??firstname??lastname???-->
<body>
<div id="app">
    A : <input type="text" name="xxx1" v-model="firstname"/> <br/>
    B : <input type="text" name="xxx2" v-model="lastname"/>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            firstname: "xu",
            lastname: "haitao"
        },

        watch: {
            firstname: function (value) {
                this.lastname = value;
            },
            lastname: function (value) {
                this.firstname = value;
            }
        }
    });
    /*
        vue.$watch("firstname", function (value) {
            this.lastname = value;
        });
        vue.$watch("lastname", function (value) {
            this.firstname = value;
        });

     */
</script>

</html>

FR：徐海涛（hunk Xu)
QQ技术交流群：386476712

海涛高软

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中Watch使用案例

Watch有两种使用形式，如下，下面这个案例，实现firstname输入框值动时，lastname输入框中值跟着动,实现lastname输入框中输入值时，fisrtname值跟着动Watch起着监听的作用，始终监视某个对象，对象发生变化时，触发相应的函数<!DOCTYPE html><html lang="en"><head> <sc...
复制链接

扫一扫