Vue中使用watch字段监听文本数据的变化

作者: Jure_joe | 来源:发表于2020-05-28 17:00 被阅读0次

vue监听和webpack基本使用
Vue中使用watch字段监听文本数据的变化
Watch监听
微信小程序之watch属性值(仿Vue)
Vue的watch和computed属性
Vue.js 监听属性
Vue学习笔记06 webpack的详细配置
vue组件传值&vuex
vue中watch详解（转）
Vue-watch

实现文本数据变化的监听有两种方式，一种是使用@keyup事件进行监听，另外一种是使用vue实例中使用watch字段进行监听
存在问题：只能监听有dom元素的
使用@keyup进行监听的写法

<input type="text" v-model="firstname" @keyup="getfullName">+<input type="text" v-model="lastname" @keyup="getfullName">=<input type="text" v-model="fullname">

<script type="text/javascript">
            const vm = new Vue({
                data:{
                    firstname:'',
                    lastname:'',
                    fullname:''
                },
                methods:{
                    getfullName() {
                        this.fullname = this.firstname +'-'+this.lastname;
                    }
                },
            }).$mount('#app');
        </script>

使用watch字段进行监听
优势：能监听非dom元素,如：用来监听路由地址的变化，'$route.path':function(newVal,oldVal){}
使用该字段，可以监听指定数据的变化，然后触发watch中对应data字段中同名属性名的function处理函数，newVal指代最新输入文本,oldVal指代上次文本框中的文本值

<input type="text" v-model="firstn">+<input type="text" v-model="lastn">= <input type="text" v-model="fulln">

<script type="text/javascript">
            const vm = new Vue({
                data:{
                    firstn:'',
                    lastn:'',
                    fulln:''
                },
                watch:{//firstn对应data中的firstn
                    firstn(newVal,oldVal) {
                        this.fulln = newVal +'-'+this.lastn;
                    },
                    lastn(newVal,oldVal) {
                        this.fulln = this.firstn +'-'+newVal;
                    }
                }
            }).$mount('#app');
        </script>

测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            第一种：使用@keyup事件
            <input type="text" v-model="firstname" @keyup="getfullName">+<input type="text" v-model="lastname" @keyup="getfullName">=<input type="text" v-model="fullname">
            <br>
            <br>
            第二种：使用watch
            <input type="text" v-model="firstn">+<input type="text" v-model="lastn">= <input type="text" v-model="fulln">
        </div>
        <script type="text/javascript">
            const vm = new Vue({
                data:{
                    firstname:'',
                    lastname:'',
                    fullname:'',
                    firstn:'',
                    lastn:'',
                    fulln:''
                },
                methods:{
                    getfullName() {
                        this.fullname = this.firstname +'-'+this.lastname;
                    }
                },
                watch:{
                    firstn(newVal,oldVal) {
                        this.fulln = newVal +'-'+this.lastn;
                    },
                    lastn(newVal,oldVal) {
                        this.fulln = this.firstn +'-'+newVal;
                    }
                }
            }).$mount('#app');
        </script>
    </body>
</html>