vue14-修改数组值触发vue绑定值改变

比眉伴天荒 2022-05-10 01:42 170阅读 0赞

首先看下面这段代码：

<!DOCTYPE html>
    <html lang=en>
    
    <head>
        <meta charset="utf-8" />
        <title>Hello world</title>
        <script src="vue.js"></script>
    </head>
    
    <body>
        <div id="root">
            <div v-for="(item,index) of list" :key="item.id">
                {
       {item.text}}---{
       {index}}
            </div>
        </div>
    
    
        <script>
            var vm = new Vue({
                el: "#root",
                data: {
                    list: [{
                        id: "ffasf-fsdnsaf7er5",
                        text: "hello"
                    }, {
                        id: "778esf-f7er5",
                        text: "world"
                    }]
                }
            })
    
        </script>
    </body>
    
    </html>

当我们通过下表改变一个对象值的时候，页面渲染跟着变了，可是当我们给数组再增加一个元素时，页面结果并没有改变。

![70][]

我们不能通过下表的方式来直接操作数据，可以有以下几种方式解决。

1.应用数组变异方法，push,pop,shift,unshift,splice,sort,reverse来操作数组。

![70 1][]

2.重新修改对象的引用

![70 2][]

3.用Vue中的方法Vue.set

![70 3][]

4.用vue实例中的方法$set

![70 4][]

[70]: /images/20220510/4c60f94f184b4db792a86a93874b97c5.png
[70 1]: /images/20220510/b575c96f31bd4130aa9b937a99326302.png
[70 2]: /images/20220510/c8c09da886ed42689b9ed19df236887a.png
[70 3]: /images/20220510/cddb1ec2403b4f94b0e737f69bc2180e.png
[70 4]: /images/20220510/00aa85ca55c54a69941d38368d7a7642.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue绑定class属性的值

css代码 <style> .red{ color:red; } .thin{ font-weight:200; } .active{ letter-spacing:

青旅半醒/ 2023年07月11日 11:20/ 0 赞/ 5 阅读

相关 vue 父子组件双向绑定传值的实现

由于 vue 是单向数据流，在父子组件传值过程中，我们只可以使用 props 将父组件值传递给子组件，而不可以直接在子组件修改 props 传递的数据；如果在子组件改变 pro

短命女/ 2022年10月27日 03:10/ 0 赞/ 175 阅读

相关 vue 中数组中添加数组_vue双向绑定数组

![184f1c62a8572ffa52a8a90e5736adc4.gif][] 众所周知,vue中v-model 会忽略所有表单元素的 value、checked、sel

Myth丶恋晨/ 2022年10月25日 14:07/ 0 赞/ 131 阅读

相关 vue 获取绑定值

<ul class="product-time clearfix pull-right" style="margin-right: 10px;"> <l

一时失言乱红尘/ 2022年05月26日 08:25/ 0 赞/ 168 阅读

相关 Vue-值绑定

vue 值绑定（1）:v-bind用于绑定属性和数据其缩写为“ : ” 也就是v-bind:id === :id （2）v-model用在表单控件上的，用于实

喜欢ヅ旅行/ 2022年05月17日 03:41/ 0 赞/ 171 阅读

相关 vue 通过动态绑定class，改变样式

根据输入框或者下拉选择框有没有值，改变按钮可不可用，及按钮颜色 <el-select v-model="selectData.id" placeholder="请选择

￡神魔★判官ぃ/ 2022年05月13日 15:20/ 0 赞/ 264 阅读

相关 vue15-修改对象值触发vue绑定改变

首先看下面代码： <!DOCTYPE html> <html lang=en> <head> <meta charset="

Myth丶恋晨/ 2022年05月10日 01:42/ 0 赞/ 146 阅读

相关 vue14-修改数组值触发vue绑定值改变

首先看下面这段代码： <!DOCTYPE html> <html lang=en> <head> <meta charset

比眉伴天荒/ 2022年05月10日 01:42/ 0 赞/ 171 阅读

相关 Vue值绑定

值绑定概述复选框单选按钮选择框的选项概述对于单选按钮，复选框及选择框的选项，`v-model` 绑定的值通常是静态字符串

深藏阁楼爱情的钟/ 2021年10月20日 01:12/ 0 赞/ 309 阅读

相关 vue之组件传值，父子组件双向绑定。

vue之组件传值一、父传子 1. 父组件给子组件绑定事件

r囧r小猫/ 2021年10月19日 00:14/ 0 赞/ 606 阅读