Vue-watch 监视

最新推荐文章于 2024-09-09 16:42:29 发布

原创最新推荐文章于 2024-09-09 16:42:29 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中watch属性的使用方法，包括如何监听数据变化并执行相应操作，以及如何监听路由路径的变化。提供了具体的代码示例，帮助读者理解watch在实际开发中的应用。

Vue-watch

一、说明

watch: {}用来监听数据的改变，每当被监听的数据改变时，就会执行对应的方法。一般用来监听路由路径的改变。

二、注意

watch中监视的变量发生改变时，执行的方法没有返回值

三、watch监听变量

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        1.字符串拼接案例, 输出结果为【用户名---密码】-->
        name:<input type="text" v-model="name">
        pwd:<input type="text" v-model="pwd">
        result:<input type="text" v-model="result">
    </div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            pwd: '',
            result: ''
        },
        methods: {},
        watch: {    // 2.监视数据变量的改变，变量值改变时，会调用对应的方法，该方法可以有两个形参，用来接收新值和旧值
            name: function (newVal, oldVal) {
                this.result = newVal + "---" + this.pwd
            },
            pwd(newVal, oldVal) {
                this.result = this.name + "---" + newVal
            }
        }
    })
</script>
</body>
</html>

三、watch监听路由路径

通过 $route.path 获取当前的路由地址，然后通过watch来监听

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1>当前地址{{curPath}}</h1>
<!--        6.router-link-->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
<!--        5.router-view-->
        <router-view></router-view>
    </div>

<!--    1.定义组件模板-->
    <template id="login">
        <h1>登录组件</h1>
    </template>
    <template id="register">
        <h1>注册组件</h1>
    </template>
<script>
    // 2.创建组件模板对象
    var login = { template: '#login' }
    var register = { template: '#register' }

    // 3.创建路由对象
    var router = new VueRouter({
        routes: [
            {path: '/', redirect: '/login'},
            {path: '/login', component: login},
            {path: '/register', component: register},
        ]
    })
    var vm = new Vue({
        el: '#app',
        data: {
            curPath: '/'
        },
        methods: {},
        router,  // 4.注册路由
        watch: { // 5.监听路由路径，$route.path
            '$route.path': function (newVal, oldVal) {
                this.curPath = newVal
            }
        }
    })
</script>
</body>
</html>

更新时间：2019-12-22