Vue响应式数据变化

最新推荐文章于 2021-11-24 00:22:28 发布

BUGliuzongyuan

最新推荐文章于 2021-11-24 00:22:28 发布

阅读量199

点赞数

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

本文链接：https://blog.csdn.net/Year98Programmer/article/details/103583085

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

响应式数据变化

指令是什么？

指令就是Vue定义的属性

双向绑定是Vue中非常重要的特性。

当视图进行改变数据时就会改变js中的数据
当js中数据发生变化就会改变视图中的数据

一

vue只能监听第一层的属性

<body>
    <div id="app">
    	
        <input type="text" v-model="msg">
        //标签内的用小胡子语法
        <p>{{msg}}</p>
    </div>
    <!-- 导入vue文件 -->
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 写vue代码 -->
    <script>
        var vm=new Vue({
        // el元素里面的内容受到Vue的控制！！！
            el:"#app",
            data:{
            // msg里面的值在页面中显示，可以修改
                msg:"134ty"
            }
        })
    </script>
</body>

二

vue只能监听第一层的属性

<body>
    <div id="app">
        <input type="text" v-model="user.name">
        <p>{{user.name}}</p>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                user:{
                    name:"lzy",
                    age:"21"
                }
            }
        })
    </script>
</body>

三

vue只能监听第一层的属性

<body>
    <div id="app">
        <input type="text" v-model="user.name">
        <p>{{user.name}}</p>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
            }
        })
    </script>
</body>

四

vue只能监听第一层的属性

<body>
    <div id="app">
        <input type="text" v-model="user.name.a">
        vue只能监听第一层的属性
        <p>{{user.name.a}}</p>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
            }
        })
    </script>
</body>

五

<body>
    <div id="app">
        <input type="text" v-model="user.name.a">
        //vue只能监听第一层的属性
        <p>{{user.name.a}}</p>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
            //user.name.a这个是监听了两层
            //他只能监听到name
            //如果想监听到a就必须加name这个层
            	name:{
					
				}
            }
        })
    </script>
</body>