vue中watch的简单使用

gunsmoke

于 2020-05-25 14:29:28 发布

阅读量82

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/gunsmoke/article/details/106332653

版权

vue学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputMsg"/>
        {{msg}}
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                inputMsg: '',
                msg: ''
            },
            computed: {
                // msg() { // 这样通过计算属性得到的值是有缓存的 
                //     return this.inputMsg;
                // }
            },
            watch: { // 值发生变化时执行回调函数,同时系统会把旧值和新值自动传过来
                inputMsg(val,oldVal) {
                    console.log('old:' + oldVal,' new val:' + val);
                    this.msg = this.inputMsg
                }
            },
            methods: {

            }
        });
    </script>
</body>
</html>

gunsmoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中watch的简单使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="a
复制链接

扫一扫

专栏目录