🍓 作者主页:💖仙女不下凡💖
🍓 前言介绍:以下👇 内容都是我个人对于前端知识的总结,会定期更新欢迎持续关注!
🍓 欢迎点赞👍 收藏⭐ 留言📝 如有错误敬请指正!
🌴1.列表的基本使用
🌞 在vue
中列表的形成,主要是运用到v-for
指令创建列表,语法结构如下👇其中v-for
可以循环数组、对象、字符串或者指定次数。
<body>
<div id="root">
<-- 1.遍历数组 -->
<ul><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li></ul>
<-- 2.遍历对象 -->
<ul><li v-for="(value,k) of car" :key="k">{{k}}-{{value}}</li></ul>
<-- 3.遍历字符串 -->
<ul><li v-for="(char,index) of str" :key="index">{{index}}-{{char}}</li></ul>
<-- 4.遍历指定次数 (用得少) -->
<ul><li v-for="(number,index) of 5" :key="index">{{number}}-{{index}}</li></ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: 'root',
data: {
persons: [
{id:'001',name:'张三',age:'18'},
{id:'002',name:'李四',age:'17'},
{id:'003',name:'王五',age:'18'},
],
car: {name:'奥迪A8',price:'70万',color:''},
str: 'hello'
}
})
</script>
🌴2.遍历列表时key的作用
🌞 思考一个问题key
在其中是什么作用呢? 在真实开发中key
的值非常不推荐绑定index
,因为某些情况下会出现一些问题,一般key
值为后台返回数据中的 id
等唯一标识,这是为什么呢?
🌞 所以请看以下代码来理解,为什么不推荐key
的值为index
!
<body>
<div id="root">
<button @click.once="add">添加一个老刘</button>
<ul>
<li v-for="(p,index) in persons" :key="index"> /这里值是index,出现问题input框中的值串行/
{{p.name}}-{{p.age}}
<input type="text"/>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: 'root',
data: {
persons: [
{id:'001',name:'张三',age:'18'},
{id:'002',name:'李四',age:'17'},
{id:'003',name:'王五',age:'18'},
]
},
methods: {
add(){
const p = {id:'004',name:'老刘',age:21}
this.persons.unshift(p)
}
}
})
</script>
🌞 下面用图分别解释一下key
的值为index
和唯一标识时候的形成过程。
🌞 所以来解答一下面试题:react、vue
中的key
有什么作用? (key
的内部原理)
🌼 虚拟DOM
中key
的作用: key
是虚拟DOM
对象的标示,当数据发生变化时,Vue
会根据新数据生成新的虚拟DOM
,随后Vue
进行新虚拟DOM
与旧虚拟DOM
的差异比较。对比规则❶旧虚拟DOM
中找到了与新虚拟DOM
相同的key
;若虚拟DOM
中内容没变,直接使用之前的真实DOM
;若虚拟DOM
中内容变了,则生成新的真实DOM
,随后替换掉页面中之前的真实DOM
。❷旧虚拟DOM
中未找到与新虚拟DOM
相同的key
创建新的真实DOM
,随后渲染到页面。
🌼 用index
作为key
可能会引发的问题: ❶若对数据进行:逆序添加、逆序删除破坏操作( 会产生没有必要的真实DOM
更新 ==> 界面效果没问题,但效率低 )。⑵如果结构中还包含输入类的DOM
( 会产生错误DOM
更新 ==> 界面有问题 )。
🌼 开发中如何选择key: 最好使用每条数据的唯一标识作为key
,比如id
、手机号、身份证号、学号等唯一值。
🌴3.列表过滤filter()
🌞 这里讲一个方法filter()
主要在列表中经常使用。页面效果如下👇
🌞 代码如下👇 该代码运用watch
监视属性,我再改文章中讲过具体用法,地址:https://editor.csdn.net/md/?articleId=120140354
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPerons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root'
data: {
keyWord:'',
persons: [
{id:'001',name:'马冬梅',age:'19',sex:'女'},
{id:'002',name:'周冬雨',age:'20',sex:'女'},
{id:'003',name:'周杰伦',age:'21',sex:'男'},
{id:'004',name:'温兆伦',age:'22',sex:'男'}
],
filPerons: [],
}
watch: { /这里也可以不用watch, 我就是举个例子/
keyWord: {
immediate: true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
})
</script>
🌴4.列表排序sort()
🌞 这里讲一个方法列表排序sort()
在列表中也经常使用。页面效果 & 代码 如下👇
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button>年龄升序</button>
<button>年龄降序</button>
<button>原顺序</button>
<ul>
<li v-for="(p,index) of filPerons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root'
data: {
keyWord:'',
sortType:0, //0原顺序,1降序,2升序
persons: [
{id:'001',name:'马冬梅',age:'19',sex:'女'},
{id:'002',name:'周冬雨',age:'20',sex:'女'},
{id:'003',name:'周杰伦',age:'21',sex:'男'},
{id:'004',name:'温兆伦',age:'22',sex:'男'}
]
},
computed: {
filPerons(){
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
})
//判断一下是否需要排序
if(this.sortType){
arr.sort((a,b) => { /sort(方法)/
return this.sortType === 1 ? b.age-a.age : a.age-b.age
})
}
return arr
}
}
})
</script>