vue中数组的相关应用
一：v-for中的key属性
作用：
如果是index作为key，在中间插入新节点，则后面的位置都变了，都会重新更新节点
如果加入key，每一个都是唯一的，在中间插入新节点，只会更新中间的节点
好处：
为了更高效地更新虚拟dom
二：计算总和(js)
reduce方法的使用
let arr=[1,2,3,4]
arr=arr.reduce(function(pre, current){
return pre+current
})
// 1+2+3+4
三：计算属性
1.计算属性里面的属性值不用在data中定义也可以直接用
2.必须要有返回值
3.当依赖的data属性发生变化时，会重新计算
4.有缓存作用，没有改变值的情况下缓存读取
四：数组常用的一些方法
var arr = [1, 2, 3]
// 往数组最后一位添加一个数字
arr.push(4) // [1, 2, 3, 4]
// 删除数组最后一个数字
arr.pop() // [1, 2, 3]
// 往数组第一位添加一个数字
arr.unshift(0)
// 删除数组第一个元素
arr.shift()
// splice
// 删除第一个元素
array.splice(index, howmany, item1, ....., itemX)
// index从index开始删，howmany删除几个，item1后面都是加的
arr.splice(1, 2)
// 相当于截取，返回指定索引的范围内
arr.slice(1，2)
// 返回1,2
// 合并数组
[1, 6].concat([5, 7])
arr=[...arr,[5,7]]
数组的方法
1:map方法
有多少长度就返回多少长度，一般我是用来组合数据格式的
let arr=[1,2,3,4,5]
let arr2=arr.map(item=>{
return item==1
}，0)
// 返回[true,false,false,false,false]
console.log('map返回',arr2)
2:filter
1.用来过滤符合条件的数据的数组
2.不能对其数据作出改变
3.返回的数据还是原来的，只是过滤了一下
4.后面的0表示作为第一次调用callback的第一个参数
let arr=[1,2,3,4,5]
let arr2=arr.filter(item=>{
item=9
return item
},0)
// 返回[1,2,3,4,5]
console.log('filter',arr2)
3：数组去重
var arr = ['qw', '2', '3ty', '1', 'er', '2', 'qw']
// 1.可以使用es6的方法去重
Array.from(new Set(arr))
// 2.循环去重数组，push到一个新数组里，然后每次循环都查找新数组是否存在该数据，没有则push进去，有的忽略
var newArray = [];
for(var i=0; i<arr.length; i++){
if(newArray.indexOf(arr[i])==-1){
newArray.push(arr[i])
}
}
//3.把标记放到一个新对象里，每次查找这个对象是都有这个属性，如果有，则忽略，没有则忘对象添加新属性，往数组添加新的值
var newArray2 = [];
var obj = {};
for(var i=0; i<arr.length; i++){
if(!obj[arr[i]]){
obj[arr[i]] = arr[i]
newArray2.push(arr[i])
}
}
vue的过滤器和全局过滤器
1：过滤器的使用
1.之前看到的是js的过滤，是用来过滤数组的
2.现在的过滤是vue的过滤器（显示内容换了，但不改变字段值）
{{ 变量名 | 过滤器名 }}
{{ num | formatNum }}
3.和data同级
4.可以用来处理日期的显示
5.可以是组件过滤器，也可以是全局过滤器（多文件使用）
data:{
num:10
},
filters:{
formatNum(val){
return val + 50 //return的值就是显示的值
}
}
图书购买的例子
<template>
<div>
<div id="app">
<table border="1" cellpadding="23" style="padding:10px">
<thead>
<tr>
<th v-for="(title, tidx) in titles" :key="tidx">{{title}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books" :key="item.name">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.date}}</td>
<td>
<button style="padding:0 10px" @click="sub(index)">-</button>
<strong style="margin:0 10px">{{item.num}}</strong>
<button style="padding:0 10px" @click="add(index)">+</button>
</td>
<td>
<button style="padding:0 10px" @click="remove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h3 style="display:flex;margin-top:10px">总价格:{{total}}</h3>
</div>
</div>
</template>
<script>
export default {
data() {
return {
titles: ["编号", "书籍名称", "价格", "出版日期", "数量", "操作"],
books: [
{
name: "数学",
date: "2006-9",
price: 85,
num: 1
},
{
name: "英语",
date: "2006-2",
price: 59,
num: 1
},
{
name: "地理",
date: "2008-10",
price: 35,
num: 1
},
{
name: "语文",
date: "2006-3",
price: 66,
num: 1
}
]
};
},
created() {},
methods: {
add(index) {
this.books[index].num++;
},
sub(index) {
if (this.books[index].num) {
this.books[index].num--;
}
},
// 移除方法
remove(index) {
// 修改 增加 删除(下标, 删除数量, .....增加的元素)
this.books.splice(index, 1);
}
},
// 计算属性
computed: {
total() {
// 像这种要算对象里面的，就要设置初始值，否则第一个初始值就是一个对象就会报错
// return preTotal.price*current.price + current.price * current.num;
//如果是上面这样写就会返回NaN，因为上一次计算的结果是一个数值，因为数值不是对象，拿不出price和num
return this.books.reduce((preTotal, current) => {
return preTotal + current.price * current.num;
},0); //总价格
}
}
};
</script>
<style lang="scss" scoped>
table {
th {
padding: 10px 20px;
}
td{
padding: 10px;
}
}
</style>