vue-watch监听非DOM元素的事件

最新推荐文章于 2024-09-02 15:11:43 发布

何迟

最新推荐文章于 2024-09-02 15:11:43 发布

阅读量972

点赞数

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82978457

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

注意：

1.通过键盘监听事件完成姓名的拼写监听的是DOM元素中的事件，是用户操作直接的事件。而watch可以监视路由等非DOM元素的事件。

2.watch监视非DOM元素事件，只需将本实例中的firstname2属性名字符串换成 '$route.path' 变量名即可，注意单引号

3.单引号的使用规则：一、字符串中带有英文连字符使用，不能使用有些驼峰原则的时候二、本来都要使用单引号的，没有使用连字符的字符串名字直接省略三、变量一定要使用单引号

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="text" v-model="firstname" @keyup="getFullname"> +
        <input type="text" v-model="lastname" @keyup="getFullname"> =
        <input type="text" v-model="fullname">
        
        <br/><br/>
        <input type="text" v-model="firstname2"> +
        <input type="text" v-model="lastname2"> =
        <input type="text" v-model="fullname2">
        
    </div>
    
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                firstname:'',
                lastname:'',
                fullname:'',
                firstname2:'',
                lastname2:'',
                fullname2:''
            },
            methods:{
              getFullname(){
                  this.fullname = this.firstname + '·' + this.lastname
              }  
            },
            watch:{ 
                firstname2: function (newVal){
                    this.fullname2 = newVal + '·' + this.lastname2;
                },
                lastname2: function (newVal) {
                    this.fullname2 = this.firstname2 + '·'+ newVal;
                }
                //function有两个参数，一个newVal表示最新的字符串，oldVal表示原有的字符串    
            }
            //监听data中的数据变化，触发对应的处理函数
        })
    </script>
</body>
</html>

效果;