条件渲染
-
v-if:
写法:
- v-if=“表达式”
- v-else-if =“表达式”
- v-else=“表达式”
适用于:切换频率较低的场景
特点:不展示DOM元素直接被移除。
注意:v-if可以和v-else-if、v-else 一起使用,但要求不能被打断。
-
v-show
写法:v-show =“表达式”
适用于:切换频率较高的场景
特点:不展示dom元素,但未被移除,底层原理是display:none,仅仅是使用样式隐藏掉。
-
备注:
使用v-if的时候,元素可能无法获取到,但使用v-show一定可以获取到。
列表渲染
-
v-for指令
用于展示列表数据
语法:v-for="(item ,index) in xxx" :key=“yyy”
可遍历:数组、对象、字符串(用的很少) 、指定次数(用的很少)
key的原理和作用
面试题:react、vue中的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,手机号,身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加,删除等破坏顺序的操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。
-
理解:
6. 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表-遍历数组</h2>
<button @click="add">添加老刘</button>
<ul>
<li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}
<input type="text">
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:28}
]
},
methods:{
add(){
const p = {id:'004',name:'老刘',age:40}
//把它添加到第一个
this.persons.unshift(p)
}
}
})
</script>
</body>
</html>
列表过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<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="(p,index) in filPerson" :key="p.id">{{p.name}}-{{p.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
keyWord:'',
sortType:0,
persons:[
{id:'001',name:'马冬梅',age:30},
{id:'002',name:'周冬雨',age:19},
{id:'003',name:'周杰伦',age:28},
{id:'003',name:'温伦',age:50}
]
},
computed:{
filPerson(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//对过滤出来的数据进行排序
if(this.sortType){
//需要排序
arr.sort((p1,p2)=>{
return this.sortType == 1 ? p2.age-p1.age : p1.age-p2.age
})
}
return arr
}
}
})
</script>
</body>
</html>