美文网首页程序员
Vue实例的watch属性

Vue实例的watch属性

作者: 小丘啦啦啦 | 来源:发表于2019-04-30 09:19 被阅读0次

一、说明
watch属性,可以监听data中指定数据的变化,然后可以触发这个watch对象中对应的处理函数。
监听的数据名作为watch对象的属性名,指向对应的处理函数。
处理函数参数:

  • 参数一,newVal,新数据。
  • 参数二,oldVal,旧数据。

二、watch实现keyup事件
监听输入框的变化进行数据拼接。

<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'>
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <input type="text" v-model="fullName">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName:'',
                lastName:'',
                fullName:''
            },
            methods: {
                
            },
            watch:{
                firstName(newVal,oldVal){
                    console.log('监视到了firstName的变化');
                    this.fullName = newVal+"-"+this.lastName;
                },
                lastName(newVal,oldVal){
                    this.fullName = newVal+"-"+this.firstName;
                }
            }
        });
    </script>
</body>

</html>

虽然说上面用keyup事件监听触发methods函数处理使输入框变化也可以实现。
watch有些优势是keyup实现不了的,这里监视的是文本框的数据,但如果是要监视看不见摸不着的、虚拟的,无法使用keyup,例如路由。

三、watch监听路由地址的改变
想要监听路由的改变,即<router-view></router-view>的改变,但它身上没有什么事件,则只能使用watch监听路由地址的改变。

<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id='app'>
        <router-link to='/login'>登陆</router-link>
        <router-link to='/register'>注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login = {
            template: '<h1>登陆组件</h1>'
        };
        var register = {
            template: '<h1>注册组件</h1>'
        };
        var router = new VueRouter({
            routes: [{
                    path: '/',
                    redirect: '/login'
                },
                {
                    path: '/login',
                    component: login
                }, {
                    path: '/register',
                    component: register
                }
            ]
        });
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            },
            watch: {
                '$route.path'(newVal, oldVal) {
                    if (newVal == '/login') {
                        console.log('欢迎进入登陆页面');
                    } else if (newVal == '/register') {
                        console.log('欢迎进入注册页面');
                    }
                }
            },
            router,
        });
    </script>
</body>

</html>

相关文章

网友评论

    本文标题:Vue实例的watch属性

    本文链接:https://www.haomeiwen.com/subject/tqlfnqtx.html