欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-24 23:37:40
 vue-watch监听非dom元素的事件 1.通过键盘监听事件完成姓名的拼写监听的是dom元素中的事件,是用户操作直接的事件。而watch可以监视路由等非dom元素的事件。 2.wat...

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

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

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

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

    html代码:

    <script src="../lib/vue.js"></script>

    + =

    + =

    <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>

    效果;

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