详解Vue的set方法
2020/1/22 5:19:14
本文主要是介绍详解Vue的set方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、起源:若直接对data内的数组、对象进行修改,不会触发视图更新
Vue文档关于这一点解释的很明白,笔者不再赘述,各位一定要看完文档再来
二、如何正确修改数组、对象以触发视图更新
2.1 数组
2.1.1 使用vue提供的变异方法
2.1.2 直接将data中的数组整个替换
如下例中,是要实现vm.items[1] = 'excess'
<body> <div id="app"> <ul> <li v-for="(item, index) in items"> {{ index }} : {{ item }} </li> </ul> </div> <script> let vm = new Vue({ el: '#app', data: { items: ['a', 'b', 'c'] }, created() { this.items = ['a', 'test', 'c'] } }) </script> </body>
2.1.3 使用set方法【后文详解】
2.2 对象
2.2.1 直接将data中的Object整个替换
如下例中,是要实现给object新增一个键值对{test: 'newthing'}
<body> <div id="app"> <ul> <li v-for="(value, name) in object"> {{ name }} : {{ value }} </li> </ul> </div> <script> let vm = new Vue({ el: '#app', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } }, created() { this.object = { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10', test: 'newthing' } } }) </script> </body>
2.2.2 使用set方法【后文详解】
三、使用set方法
3.1 官方API文档
文档:Vue.set( target, propertyName/index, value )
注意Vue.set()还有个别名,用于vue实例——vue.$set( target, propertyName/index, value )
3.2 应用
数组
如下例中,是要实现vm.items[1] = 'excess'
<body> <div id="app"> <ul> <li v-for="(item, index) in items"> {{ index }} : {{ item }} </li> </ul> </div> <script> let vm = new Vue({ el: '#app', data: { items: ['a', 'b', 'c'] }, created() { this.$set(this.items, 1, 'excess') } }) </script> </body>
对象
如下例中,是要实现给object新增一个键值对{test: 'newthing'}
<body> <div id="app"> <ul> <li v-for="(value, name) in object"> {{ name }} : {{ value }} </li> </ul> </div> <script> let vm = new Vue({ el: '#app', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } }, created() { this.$set(this.object, 'test', 'newthing') } }) </script> </body>
这篇关于详解Vue的set方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程