目录
key原理(内含案例)
案例1:采用watch过滤列表(筛选用户信息)
案例2:采用watch过滤列表(筛选用户信息)
实现筛选、升序、降序、原顺序等功能
第一部分:key原理(内含案例)
<!-- key的原理 -->
<div id="root">
<ul>
<h2>人员信息</h2>
<!-- once指的是只执行一次就结束该点击按钮 -->
<button @click.once="acrt">添加一个老刘</button>
<!-- 遍历数组 -->
<!-- 1,真是dom中key被vue征用了,虚拟dom是有key的索引值,所以在li里面是不会显示key的值,若是使用index,在添加某个功能时,我们在li标签内部添加表单 同时添加一个人的数据以及在数据的后面
都添加一个input表单,类型是text 那样内部的数据就会交互,index不具有唯一性,而p.id具有数据的唯一性,就好比一个人的身份证,数据具有唯一性-->
<li v-for="(p,index) of persons" :key="p.id">
{ {p.name}}-{ {p.age}}
<!-- 因测试添加下面的表单 -->
<!-- <input type="text" /> -->
<!-- 注:若是按照顺序添加,那么就正常添加不会出现问题 -->
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods:{
acrt(){
// 函数内部的数据不能添加逗号,只能添加分号,否则就会报语法错误
const p = {id:'004',name:'老刘',age:23}
// 将数据添加值persons数组的最前面
this.persons.unshift(p)
// console.log(this)
}
}
})
</script>
第二部分:案例1:采用watch过滤列表(筛选用户信息)
<div id="root">
<!-- 设置双向绑定,获取用户输入的数据 -->
<input type="text" placeholder="请输入名字" v-model="keyword"/>
<ul>
<h2>人员信息</h2>
<!-- 遍历filpersons内部的数据 -->
<li v-for="(item,index) of filpersons" :key="item.id">
{ {item.name}}-{ {item.age}}-{ {item.sex}}
</li>
</ul>
</div><script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
// 起始内容是空
keyword:'',
persons:[
{id:'001',name:'马冬梅',age:18,sex:'女'},
{id:'002',name:'周冬雨',age:19,sex:'女'},
{id:'003',name:'周杰伦',age:20,sex:'男'},
{id:'004',name:'温兆伦',age:23,sex:'男'}
],
// 创建一个空数组
filpersons:[]
},
// 使用一个watch侦听数组persons内部的值
watch:{
// 侦听keyword内部数据变化
keyword:{
immediate:true,
handler(val){
// 筛选出参数内容为item
this.filpersons = this.persons.filter((item)=>{
// 返回出item内部的name值是否在含有,若没有是-1,若有返回的是数据
return item.name.indexOf(val) !==-1
// 将返回的值传给filpersons
})
}
}
}
})</script>
案例2:采用watch过滤列表(筛选用户信息)
<div id="root">
<!-- 设置双向绑定,获取用户输入的数据 -->
<input type="text" placeholder="请输入名字" v-model="keyword" />
<ul>
<h2>人员信息</h2>
<!-- 遍历filpersons内部的数据 -->
<li v-for="(item,index) of filpersons" :key="item.id">
{ {item.name}}-{ {item.age}}-{ {item.sex}}
</li>
</ul>
</div>
<!-- 采用计算属性去筛选 -->
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
// 起始内容是空
keyword: '',
persons: [{
id: '001',
name: '马冬梅',
age: 18,
sex: '女'
},
{
id: '002',
name: '周冬雨',
age: 19,
sex: '女'
},
{
id: '003',
name: '周杰伦',
age: 20,
sex: '男'
},
{
id: '004',
name: '温兆伦',
age: 23,
sex: '男'
}
]
},
// 采用计算属性去获取数据
computed: {
// 这里放置方法
filpersons(){
// 返回筛选出来的值传入页面中的filpersons集合里 item是persons内部的数据
return this.persons.filter((item)=>{
// 判断item中的姓名与用户输入的this.keyword内部数据是否一直,若不一直则等于-1
return item.name.indexOf(this.keyword) !==-1
})
}
}})
</script>
第三部分:实现筛选、升序、降序、原顺序等功能
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入姓名" v-model="keyword" />
<button @click="sortType=2">年龄升序</button>
<button @click="sortType=1">年龄降序</button>
<button @click="sortType=0">原顺序</button>
<ul>
<li v-for="(item,index) of filPerons" :key="item.id">
{ {item.name}}-{ {item.age}}-{ {item.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
// 起始内容是空
keyword: '',
sortType:0,//0代表原顺序 1代表降序 2代表升序
persons: [{
id: '001',
name: '马冬梅',
age: 18,
sex: '女'
},
{
id: '002',
name: '周冬雨',
age: 19,
sex: '女'
},
{
id: '003',
name: '周杰伦',
age: 20,
sex: '男'
},
{
id: '004',
name: '温兆伦',
age: 23,
sex: '男'
}
]
},// 采用计算属性去获取数据
computed: {
// 这里放置方法
filPerons(){
// 筛选出来的值赋给arr变量 item是persons内部的数据
const arr = this.persons.filter((item)=>{
// 判断item中的姓名与用户输入的this.keyword内部数据是否一直,若不一致则等于-1
return item.name.indexOf(this.keyword) !==-1
})
// 通过获取data中this.sortType中的数据是否是真还是假
if(this.sortType){
// 对获取的数据进行判断是升序还是降序
arr.sort((a,b)=>{
// 运用三元运算符去判断升序还是降序
return this.sortType==1? b.age-a.age:a.age-b.age
})
}
// 随后通过上面的判断得出升序还是降序之后,会有数据传给arr变量中,那么我们在外面就直接对他进行设置返回值
return arr
}
}
})
</script>