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

Myth丶恋晨 2022-05-10 01:42 160阅读 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">
            
            <template v-for="(item,key,index) of userInfo">
                <div>{
       {item}}---{
       {key}}--{
       {index}}</div>
            </template>
        </div>
    
    
        <script>
    
            var vm = new Vue({
                el: "#root",
                data: {
                    userInfo:{
                        name:"xu",
                        age:"25",
                        gender:"man"
                    }
                }
            })
    
        </script>
    </body>
    
    </html>

当我通过如下方式增加userInfo属性时，页面并没有发生改变，通过（.属性方式）更改现有属性是会发生改变的

![70][]

有一下几种方式解决：

1.重新给对象赋引用

![70 1][]

2.Vue中的方法 Vue.set

![70 2][]

3.Vue实例中的方法$set

![70 3][]

[70]: /images/20220510/dfad5cd72f844de6834fd299aa928465.png
[70 1]: /images/20220510/ce6727e7f4ea404880792f8d5a7ddb5a.png
[70 2]: /images/20220510/d950135a094e4c8eb3b0bf5219b3a196.png
[70 3]: /images/20220510/ebe947753d0149059b9c7901cc12a6b8.png

发表评论取消回复

表情：

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

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

相关阅读

相关 VUE对象的动态绑定

VUE对象的动态绑定 * vue不检测对象的删除和添加 * 动态添加对象属性 * 动态添加对象属性的双向绑定的实现 vue不检测对象的删除和添加 ...

Dear 丶/ 2024年04月17日 17:35/ 0 赞/ 72 阅读

相关 vue绑定class属性的值

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

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

相关 vue 绑定事件，获取元素对象

vue 绑定事件，获取元素对象例如： <img v-bind:src="item.fmguid" v-on:error="imgerror($event)" >

分手后的思念是犯贱/ 2023年01月03日 14:15/ 0 赞/ 293 阅读

相关 vue 获取绑定值

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

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

相关 Vue-值绑定

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

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

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

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

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

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

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

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

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

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

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

相关 vue09-class对象样式绑定

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

淩亂°似流年/ 2022年05月10日 00:10/ 0 赞/ 163 阅读

相关 Vue值绑定

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

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