v-for指令：
- 用于展示列表数据
- 语法：v-for=”(item,index) in xxx” :key=”yyy”
- 可以遍历数组，对象，字符串（用的很少），指定次数（用的很少）
<div id="root">
<ul>
<li v-for="(item,index) in persons" :key="item.id">
{{item.name}}-{{item.age}}
</li>
</ul>
<div v-for="(value,key) in car" :key="index"> {{value}}-{{key}}</div>
<div v-for="(char,index) in teststr" :key="index"> {{char}}-{{index}}</div>
<ul>
<li v-for="(number,index) in 5" :key="index"> {{number}}-{{index}}</li>
</ul>
</div>
data() {
return {
persons: [{
id: 001,
name: '张三',
age: 18
},
{
id: 002,
name: '李四',
age: 19
}, {
id: 003,
name: '王五',
age: 20
}],
car: {
name: '车名',
price: '价格',
color: '颜色'
},
teststr: 'hello'
}
react、vue中key的作用（内部原理）
虚拟DOM中key的作用
- key时虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM和旧虚拟DOM的差异比较，规则如下
2.对比规则：
- 旧虚拟DOM中找到了与新虚拟DOM相同的key：
如果虚拟DOM中内容没变，直接使用之前的真实DOM
如果虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key:
创建新的真实DOM，随后渲染到页面
3.用index作为key可能会引发的问题：
1.若对数据进行逆序添加、逆序删除等破坏顺序操作时，会产生没有必要的真实DOM更新，界面效果没问题，但效率低。
2.如果结构中还包含输入类的DOM，则会产生错误的DOM更新，界面会有问题。
开发中如何选择key：
1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表，用于展示，使用index作为key是没有问题的
过滤：
watch实现：
<div id="root">
<input type="text" placeholder="请输入姓名" v-model="keyword">
<ul>
<li v-for="(item,index) in filPerson" :key="item.id"> {{item.name}}-{{item.age}}-{{item.sex}} </li>
</ul>
</div>
data() {
return {
persons: [{
id: 001,
name: '马冬梅',
age: 18,
sex: '女'
},
{
id: 002,
name: '周冬雨',
age: 19,
sex: '女'
}, {
id: 003,
name: '周杰伦',
age: 20,
sex: '男'
}, {
id: 004,
name: '温兆伦',
age: 21,
sex: '男'
}],
filPerson: [],
keyword: ''
}
},
watch: {
keyword: {
immediate: true,//indexof('')===0,所以会返回全部数据
handler(val) {
this.filPerson = this.persons.filter(item => {
return item.name.indexOf(val) !== -1
})
}
}
},
计算属性实现：
<input type="text" placeholder="请输入姓名" v-model="keyword">
<ul>
<li v-for="(item,index) in filPerson" :key="item.id"> {{item.name}}-{{item.age}}-{{item.sex}} </li>
</ul>
data() {
return {
persons: [{
id: 001,
name: '马冬梅',
age: 18,
sex: '女'
},
{
id: 002,
name: '周冬雨',
age: 19,
sex: '女'
}, {
id: 003,
name: '周杰伦',
age: 20,
sex: '男'
}, {
id: 004,
name: '温兆伦',
age: 21,
sex: '男'
}],
keyword: ''
}
},
computed: {
filPerson() {
return this.persons.filter(item => {
return item.name.indexOf(this.keyword) !== -1
})
}
},
排序：
<input type="text" placeholder="请输入姓名" v-model="keyword">
<button @click="type=0">原顺序</button>
<button @click="type=1">升序</button>
<button @click="type=2">降序</button>
<ul>
<li v-for="(item,index) in filPerson" :key="item.id"> {{item.name}}-{{item.age}}-{{item.sex}} </li>
</ul>
data() {
return {
persons: [
{
id: 001,
name: '马冬梅',
age: 19,
sex: '女'
},
{
id: 002,
name: '周冬雨',
age: 18,
sex: '女'
}, {
id: 003,
name: '周杰伦',
age: 20,
sex: '男'
}, {
id: 004,
name: '温兆伦',
age: 17,
sex: '男'
}
],
keyword: '',
type: 0//0原顺序，1升序，2降序
}
},
computed: {
filPerson() {
const arr = this.persons.filter((item) => {
return item.name.indexOf(this.keyword) !== -1
})
if (this.type) {
arr.sort((a, b) => {
return this.type == 1 ? a.age - b.age : b.age - a.age
})
}
return arr
}
},