Vue watch监听

最新推荐文章于 2023-05-21 18:02:24 发布

2B青年弹棉花

最新推荐文章于 2023-05-21 18:02:24 发布

阅读量86

点赞数

分类专栏： Vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42158198/article/details/104764290

版权

Vue学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
    <script type="text/javascript">
        var App = {
            data(){
                return{
                    msg:'',
                    names:[{name:'Jason'}]
                }
            },
            template:`
                <div>
                    <input type="text" v-model="msg" />
                    <h1>{{msg}}</h1>
                    <button @click="names[0].name = 'Tony'">修改名字</button>
                    <h5>{{names[0].name}}</h5>
                </div>
            `,
            watch:{
                msg:function (newV,oldV) {
                    console.log('新值'+newV+' 旧值'+oldV);
                },
                names:{
                    deep:true,
                    handler:function (newV,oldV) {
                        console.log('新值'+newV[0].name+' 旧值'+oldV[0].name);
                    }
                }
            }
        }
        new Vue({
            el:'#app',
            components:{
                App:App
            },
            template:`<App />`
        });
    </script>
</html>

2B青年弹棉花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue watch监听

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../vue/dist/vue.min.js">&...
复制链接

扫一扫

专栏目录