Vue学习（二十六）——Vue动态处理响应式数据

最新推荐文章于 2024-04-17 18:12:30 发布

云中、漫步

最新推荐文章于 2024-04-17 18:12:30 发布

阅读量457

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_44075963/article/details/108928213

版权

Vue学习专栏收录该内容

24 篇文章 14 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
      Vue实例的生命周期
    */
    var vm = new Vue({
        el: '#app',
        data: {
            msg:"",
            list:["西游记","三国演义","水浒传"]
        }
    });
    vm.list[0] = "狂人日记"
</script>
</body>
</html>

在这里插入图片描述
我们可以看到，即使数据被修改了，但页面还是无法动态响应。Vue给我们提供了动态处理响应式数据的API，我们可以用来修改数组元素或者对象属性。如下：

Vue.set(vm.items, indexOfItem, newValue) -----Vue形式
vm.$set(vm.items, indexOfItem, newValue)------Vue实例形式

① 参数一表示要处理的数组名称或对象名称
② 参数二表示要处理的数组的索或者对象属性
③ 参数三表示更改后的数组或对象的值


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
    <div>{{user.name}}</div>
    <div>{{user.age}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
      Vue实例的生命周期
    */
    var vm = new Vue({
        el: '#app',
        data: {
            user:{
                name:"macay",
                age:"20"
            },
            list:["西游记","三国演义","水浒传"]
        }
    });
   Vue.set(vm.user,"age",25);
   vm.$set(vm.list,0,"朝花夕拾")
</script>
</body>
</html>

在这里插入图片描述
可以看到数据已经动态响应了。

云中、漫步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（二十六）——Vue动态处理响应式数据

目录上一节我们学习了如何处理数组的一些方法。那么，我们想要修改了数组中的内容，页面会动态响应吗？我们看下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><div id="app"> <input type="t
复制链接

扫一扫