Web全栈探索，Vue基础系列，常用特性（四）侦听器

一、什么是侦听器

二、侦听器的应用场景

数据变化时执行异步或开销较大的操作

三、侦听器的使用

watch: {
    监听的变量名: function(val){
    // val表示 被监听变量的最新值
        业务操作
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <div>
        <span>名：</span>
        <span>
        <input type="text" v-model='first_name' aria-label="名">
      </span>
    </div>
    <div>
        <span>姓：</span>
        <span>
        <input type="text" v-model='last_name' aria-label="姓">
      </span>
    </div>
    <div>{{fullName}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
      该案例使用计算属性和监听器均能实现
    */
    let vm = new Vue({
        el: '#app',
        data: {
            first_name: 'Jim',
            last_name: 'Green',
        },
        computed: {
            // 计算属性实现方式
            fullName: function(){
                return this.first_name + ' ' + this.last_name;
            }
        },
        watch: {
            // 监听器实现方式
            // 函数的名称必须与要监听的变量名一致
            // 函数中有一个参数，其代表当前监听变量的最新值
            first_name: function(val) {
              this.fullName = val + ' ' + this.last_name;
            },
            last_name: function(val) {
              this.fullName = this.first_name + ' ' + val;
            }
        }
    });
</script>
</body>
</html>

 

posted @ 2020-07-18 19:05  IT蓝月  阅读(100)  评论(0)  编辑  收藏  举报
Live2D