vue中set基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中set方法</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!--<div v-for="(item,key,index) of userInfo">-->
            <!--{{item}}-&#45;&#45;{{key}}-&#45;&#45;{{index}}-->
        <!--</div>               &lt;!&ndash;对对象进行循环&ndash;&gt;        -->
        <div v-for="(item,index) of userInfo1">
            {{item}}
        </div>               <!--对数组进行循环-->
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                // userInfo:{
                //     name:'alex',
                //     age:'27',
                //     gender:'male',
                //     salary:'secret'
                // }

                userInfo1:[1,2,3,4]
            }
        })
    </script>
</body>
</html>

<!--
Vue.set(vm.userInfo,'address','beijing')
此时就是在不改变地址引用 就可以直接改变数据  并且渲染在页面上

vm.$set(vm.userInfo,'address','beijing') 也可以实现一样的效果

对于列表 上述两种set用法都可以实现改变数据 渲染在网页上
Vue.set(vm.userInfo,1,5)
vm.$set(vm.userInfo,2,10)

-->

猜你喜欢

转载自www.cnblogs.com/xuyxbiubiu/p/9968115.html