vue2.0 watch监听

最新推荐文章于 2024-12-03 11:10:08 发布

转载最新推荐文章于 2024-12-03 11:10:08 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vhen/p/7606682.html

文章标签：

#javascript #ViewUI

本文深入探讨Vue.js中监听变量变化的技巧，包括浅监听和深度监听的使用场景及实现方式。通过实例展示如何对单个变量和对象进行监听，并处理中文输入的过滤。

1、单个变量可以用浅监听，如是对象就用深度监听了

<template lang="html">
   <div>
       <input type="text" v-model="username">
       <input type="text" v-model="person.name">
   </div>
</template>

<script>
export default {
    data () {
        return {
            username: 'vhen',
            person: {
                name: ''
            }
        }
    },
    watch: {
        username () { //浅监听
            this.username = this.username.replace(/[\u4e00-\u9fa5]/g, '');
        },
        person: { //深度监听
            handler (newValue, oldValue) {
                newValue.name = newValue.name.replace(/[\u4e00-\u9fa5]/g, '');
            },
            deep: true
        }
    }
}
</script>

<style lang="css">
</style>