vue15-修改对象值触发vue绑定改变_vue动态绑定一个参数,改变会触发方法

作者：菜鸟追梦旅行 | 2024-04-03 12:33:02

踩

vue动态绑定一个参数,改变会触发方法

首先看下面代码：


<!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渲染到页面上标签就没有了 -->
        <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属性时，页面并没有发生改变，通过（.属性方式）更改现有属性是会发生改变的

有一下几种方式解决：

1.重新给对象赋引用

2.Vue中的方法 Vue.set

3.Vue实例中的方法$set

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/355556