vue数组刷新_Vue数组更新方法
Vue的核心是数据与视图的双向绑定，当我们修改数组时，Vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数组变异的方法，使用他们改变数组也会触发视图更新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
比如以下例子：
- {{ book.name }}
JavaScript代码：
var app = new Vue({
el: '#app',
data:{
books:[
{ name: '《Vue.js实战》' },
{ name: '《JavaScript语言精粹》' },
{ name: '《JavaScript高级程序设计》' }
]
}
});
然后，我再给数据books添加一项：
app.books.push({
name: '《css解密》'
});
使用上面的方法会改变原始数组，当然也有些方法不会改变原数组，例如：
filter()
concat()
slice()
他们返回的是一个新数组，在使用这些非变异方法时，可以用新数组来替换原数组，以下例子，我们找出含有JavaScript关键词的数目，例如：
- 书名：{{ book.name }}
- 作者：{{ book.author }}
var app = new Vue({
el: '#app',
data:{
books:[
{
name: '《Vue.js实战》',
author: '梁灏'
},
{
name: '《JavaScript语言精粹》',
author: 'Douglas Crockford'
},
{
name: '《JavaScript高级程序设计》',
author: 'Nicholas C.Zakas'
}
]
}
});
app.books = app.books.filter(function (item){
return item.name.match(/JavaScript/);
});
渲染的结果中，第一项《Vue.js实战》被过滤到了，只显示书名中含有JavaScript的选项。
Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化的复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心新能问题。
需要注意的是，以下变动的数组中，Vue是不能检测到的，也不会触发视图更新：
通过索引直接设置项，比如app.books[3] = {…}。
修改数组长度，比如app.books.length = 1。
解决第一个问题可以用两种方法实现同样的效果，第一种是使用Vue内置的set方法：
Vue.set(app.books, 3, {
name: '《css解密》',
author: '[希] Lea Verou'
});
如果是在webpack中使用组件化的方式，默认是没有导入Vue的，这时可以使用$set，例如：
this.$set(app.books, 3, {
name: '《css解密》',
author: '[希] Lea Verou'
});
//这里的this指向的就是当前组件实例，即app。在非webpack模式下也可以用$set方法，例如app.$set(…)
另一种方法：
app.books.splice(3, 1, {
name: '《css解密》',
author: '[希] Lea Verou'
});
第二个问题也可以直接用splice来解决：
app.books.splice(1);
vue数组刷新_Vue数组更新方法相关推荐
- vue数组刷新_Vue中数组更新后，页面没有动态刷新问题
最近使用vue开发时,在一个函数中使用for循环,改变了页面中的数组,在函数中查看是修改成功的,但是页面中没有动态刷新. 在Vue的官方文档有提到这样一个注意事项: 数组变更检测注意事项: 由于 Ja ...
- vue 获取数组索引_Vue - 数组方法
变异方法(修改原有数组) push() pop() shift() unshift() splice() sort() reverse() Vue对数据的处理一般都是响应式的,而原生JS数组方法对数据 ...
- vue表格刷新数据_Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- vue 字典配置_vue遍历数据及字典的方法
数组:数值 {{ item.message }} 数组:数值加索引 {{ item.msg }} {{index}} 字典:key value index {{ value }} {{key}} {{ ...
- vue数组变化视图_vue数组操作不更新视图问题(示例代码)
vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
- vue 加载页面时触发时间_5.6 vue更新数组时触发视图更新的方法，熟记JavaScript原生方法...
问题:vue更新数组时触发视图更新的方法 变异方法: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.什么是变异方法呢?简单理解就是改变了原来的数组,可能包括数组长度length,或者 ...
- vue 数组中嵌套数组_Vue 嵌套数组 数组更新视图不更新
关于Vue的响应式原理,可以看官方文档或其他资料, https://www.jianshu.com/p/34de360d6035 data里定义了一个数组arr,数组的元素可以是同样格式的数组arrC ...
- vue数组变化视图_vue数组操作不更新视图问题
vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
- vue更新数组时触发视图更新的方法
参考原文: vue更新数组时触发视图更新的方法 - 大橙橙 - 博客园 vue数组对象修改触发视图更新 - 看风景就 - 博客园 直接修改数组元素是无法触发视图更新的,如 this.array[0] ...
最新文章
- Swift 中 10 个震惊小伙伴的单行代码
- markdown编辑器基本用法
- C++11 正则表达式——实例1
- 试试 python-dotenv，避免敏感信息被硬编码到代码中
- QT技术应用_2D绘图(转)
- 解决LoggerFactory is not a Logback LoggerEither remove Logback or the competing implementation (class
- SU Demos-02Filtering-05Suk1k2filter
- 地理科学师范计算机,地理科学师范考研方向指导参考
- 【学习笔记】第三章——内存 I（交换技术、进程七状态模型、动态分区分配、动态分区算法）
- 太空java游戏_JavaSpaceWar 一个基于 语言编写的太空战争游戏，包含所有图像和声音资源，便 习理解使用 Game Program 238万源代码下载- www.pudn.com...
- 限制文本框中只能输入数字(+,-)的正则表达式写法
- pytorch如何将训练提速？
- TCP协议以及TCP的三次握手和四次挥手
- json编辑器插件 vue_vue-json-editor json编辑器
- win10下同一局域网电脑互传文件
- 博士申请——Research Proposal
- install报Failed to execute goal on project xxx: Could not resolve
- VUE类似微信朋友圈查看图片组件
- java 定义一个学生类，利用无参和带参方法调用
- Windows10使用浏览器崩溃复现及分析