(六) -set用法-给目标对象增加一个响应式数据

set用法-给目标对象增加一个响应式数据

https://cn.vuejs.org/v2/api/#Vue-set

用法

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

注意

对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

Vue.set( target, propertyName/index, value )

  • 参数
    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value
  • 返回值:设置的值。

示例

set用法.html

<body>
    <!-- View -->
    <div id="app">
        <h1>{{ name }}</h1>
        <h1>{{ age }}</h1>

        <div>
            <input type="text" v-model="name">
        </div>
        <span v-text="name"></span>
        <input type="text" v-model="age">

        <hr> {{ dog.name }}
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        // ViewModel
        const vm = new Vue({
            el: '#app',
            // Model
            data: {
                name: 'zs',
                age: 18,
                dog: {}
            }
        })

        // vm.test = 'abc'
        // vm.dog.name = 'byd'

        // 不允许使用set方法给vue实例增加新的成员
        // set方法内部调用了defineProperty把新增的name属性设置为getter/setter
        Vue.set(vm.dog, 'name', '新增xxxx')
    </script>
</body>
发布了199 篇原创文章 · 获赞 1 · 访问量 5470

猜你喜欢

转载自blog.csdn.net/weixin_44867717/article/details/104900531