从vue渲染想到的数组方法

 1   <div id="app">
 2         <ul>
 3             <li v-for=‘item in goods‘>{{item}}</li>
 4         </ul>
 5
 6         <div>{{a}}</div>
 7
 8         <button v-on:click=‘demo‘>click</button>//由于js的弱点导致的,vue无法检测到数组内部的变化,只能检测到地址变化
 9     </div>
10     <script>
11         var vm = new Vue({
12             el: ‘#app‘,
13             data: {
14                 a: 1,
15                 goods: [‘aa‘, ‘bb‘, ‘cc‘, ‘rrr‘]
16             },
17             methods: {
18                 demo: function () {
19                     this.goods=this.goods.concat(1,2,3)//改变原数组,能重新渲染
20                     this.goods.concat(1,2,3)//不改变原数组,不能重新渲染
21                     this.goods.splice(1)//splice方法能够改变原数组会重新渲染                        Vue.set(this.goods,1,‘fff‘)//用set方法  能够检测到到变化

22                 }
23             }
24         })
25     </script>

v-for指令如果渲染的对象没有改变地址,则不会重新渲染

原文地址:https://www.cnblogs.com/dangdanghepingping/p/10159953.html

时间: 2024-11-09 09:08:08

从vue渲染想到的数组方法的相关文章

关于在vue中结合数组方法的this的指向问题

最近在项目中遇到一个这样的小问题,在用数组方法结合vue的时候,this的指向不是当前的vue实例,直接看代码 allSelect: function() {   var _this = this;   console.log(_this)   this.checkId = [];   this.batchDealItem.forEach(function(item) {       //console.log(item.APPID)      _this.checkId.push(item.A

es6新增的数组方法和对象

es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法法 for (let value of arr) { console.log(value);//输出1,2,3,4,3,2,1,2 } 1. 数组.map() 返回一个新的数组,es5要复制一个新的数组我们一般用循环,现在直接用map let arr=[1,2,3,4,3,2,1,2]; let newArr=arr.map((va

Vue把父组件的方法传递给子组件调用(评论列表例子)

Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue-2.4.0.js"></script> <link

vue中计算属性,方法,侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 7.位置方法 8.迭代方法 9.归并方法 在实例中介绍,实例如下 /* Array类型 js数组中的每一项可以用来保存任何类型的数据:js数组的大小是可以动态调整的 */ var colors = ["red", "blue", "green"];

JavaScript数组方法对比(深度学习数组)

JavaScript数组方法对比 众所周知,JavaScript提供了许多对数组进行改变的方法,但是有些会对原数组进行影响,有些不会.下边就列举出来. 一.新增 影响原数组 array.push()  //向数组的末尾添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]; array.push(6); // [1,2,3,4,5,6]; array.unshift() //向数组的开头添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]

循环加法及数组方法

1,从1到100的和值计算. for循环<script type="text/javascript">    var sum=0;    for (var i= 0;i<=100;i++){        sum+=i;    }    console.log(sum);</script> while循环    var x=1;    var sum=0;    while (x<=100){        sum+=x;        x++;  

数组练习:各种数组方法的使用&amp;&amp;事件练习:封装兼容性添加、删除事件的函数&amp;&amp;星级评分系统

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

HTML5数组方法

***************************** forEach方法 ***************************** ? <script>var data = [1,2,3,4];var sum = 0; // 计算数据元素的值data.forEach(function(_val){sum += _val;})console.log(sum); //每个数据元素的值加1data.forEach(function(_val,i,_arr){_arr[i] = _val+1;