Vue-watch 监视

最新推荐文章于 2024-06-06 18:47:35 发布

Leisure Tea

最新推荐文章于 2024-06-06 18:47:35 发布

阅读量179

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/SevenSongyun/article/details/103654053

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>