当前位置：首页 > news >正文

Vue学习（三）条件渲染、列表渲染

news 来源：原创 2024/9/20 8:55:23

条件渲染

v-if

写法：v-if=”表达式”（v-else-if=”表达式”、v-else）

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if和v-else-if和v-else一起使用时，结构要紧挨在一起。v-if还可以和template标签一起使用，包含在template标签里面的内容会一起受到template标签的v-if的作用，且不会修改dom的结构。

v-show

写法：v-show=”表达式”

适用于：切换频率较高的场景。

特点：不展示的dom未被移除，仅仅是使用样式隐藏了，设置了display属性使得其dom不展示。

条件渲染例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><script type="text/javascript" src="../vue.js"></script></head><body><div id="root"><h3 v-show="false">你好，{{name}} </h3><br/><h3 v-show="1 === 2">你好，{{name}} </h3><br/><h3 v-show="false">你好，{{name}} </h3><br/><h3 v-if="false">你好，{{name}} </h3><br/><br/><h2>当前n的值为{{n}}</h2><button @click="n++">点我n加一</button><div v-show="n % 3 == 0">曼波</div><div v-show="n % 3 == 1">哈基米</div><div v-show="n % 3 == 2">阿弥诺斯</div><hr/><div v-if="n % 3 == 0">曼波</div><div v-if="n % 3 == 1">哈基米</div><div v-if="n % 3 == 2">阿弥诺斯</div><hr/><div v-if="n % 3 === 0">曼波</div><div v-else-if="n % 3 === 0">哈基米</div><div v-else>阿弥诺斯</div><template v-if="n % 3 == 1"><h2>呵呵呵</h2><h2>wow</h2><h2>哦耶</h2></template></div></body><script type="text/javascript">new Vue({el:'#root',data:{name:'李二狗',n:0}})</script>
</html>

列表渲染

列表渲染使用的语法是v-for=”a in A”，其中，a是迭代中的每一代的数据，A是迭代目标（可以是数组、对象，字符串也可以，但是字符串的遍历用的不多，当成一个字符数组就行）

当迭代目标是数组时

此时a代表着数组中的每一个元素，假如数组中的元素是对象，要引用其中的属性，使用{{a.属性}}即可。

除此之外，还要记得标明元素的唯一性标识，使用:key=”a.属性（唯一性标识）”

a还可以写作(a,index)，即v-for=”(a,index) in A”，此时第一个参数a代表着数组中的每一个元素，第二个参数index代表着数组中元素的下标。所以如果数组中的元素不是对象或者没有唯一性标识，可以使用index作为唯一性标识。

  	  <ul><li v-for="person in persons" :key="person.id">姓名：{{person.name}}  年龄：{{person.age}}</li></ul>

如此页面上就会遍历展示persons中的每个person的相关信息

还可以写作v-for=”a in 数字”，意思是遍历几次，a in 5就是遍历五次。用的比较少。

当迭代目标是对象时

此时的a应该写作(value,key)，唯一性标识写key即可，此时的key就是属性名，value就是属性值

      <ul><li v-for="(value,key) in cars" :key="key">{{key}}是{{value}}</li></ul>

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><script type="text/javascript" src="../vue.js"></script></head><body><div id="root"><h3>你好，{{name}} </h3><br/><!-- 遍历数组 --><ul><li v-for="person in persons" :key="person.id">姓名：{{person.name}}  年龄：{{person.age}}</li></ul><hr/><!-- index是元素在数组中的索引 --><ul><li v-for="(person,index) in persons" :key="person.id">姓名：{{person.name}}  --年龄：{{person.age}} --index: {{index}}</li></ul><!-- 对象 --><ul><li v-for="(value,key) in cars" :key="key">{{key}}是{{value}}</li></ul></div></body><script type="text/javascript">new Vue({el:'#root',data:{name:'李二狗',persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],cars:{name:'比亚迪',price:20000,color:'black'}}})</script>
</html>

key的作用：key是虚拟DOM对象的标识，当状态中的数据发生变化时，vue会根据新的数据生产新的虚拟DOM，随后vue会将新的虚拟DOM和旧的虚拟DOM进行比较，当key相同以及其中内容相同时才会直接使用之前的虚拟DOM。如此才不会出现错误的DOM更新。并且使用key时，能在插入数据时，不会出现多条数据的虚拟DOM更新，效率更高。

列表过滤

监视属性实现

没有新的知识点，直接见案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><script type="text/javascript" src="../vue.js"></script></head><body><div id="root"><input type="text" placeholder="请输入名字" v-model="keyWords"><ul><li v-for="person in Fpersons" :key="person.id">--姓名：{{person.name}} --年龄：{{person.age}} --性别：{{person.gender}}</li></ul><hr/></div></body><script type="text/javascript">new Vue({el:'#root',data:{name:'李二狗',keyWords:'',persons:[{id:'001',name:'亚托克斯',age:18,gender:'男'},{id:'002',name:'维鲁斯',age:19,gender:'男'},{id:'003',name:'希维尔',age:20,gender:'女'},{id:'004',name:'伊泽瑞尔',age:21,gender:'男'}],Fpersons:[]},watch:{keyWords:{immediate:true,handler(newValue){this.Fpersons=this.persons.filter((p)=>{return p.name.indexOf(newValue) !== -1})}}}})</script>
</html>

计算属性实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><script type="text/javascript" src="../vue.js"></script></head><body><div id="root"><input type="text" placeholder="请输入名字" v-model="keyWords"><ul><li v-for="person in Fpersons" :key="person.id">--姓名：{{person.name}} --年龄：{{person.age}} --性别：{{person.gender}}</li></ul><hr/></div></body><script type="text/javascript">new Vue({el:'#root',data:{name:'李二狗',keyWords:'',persons:[{id:'001',name:'亚托克斯',age:18,gender:'男'},{id:'002',name:'维鲁斯',age:19,gender:'男'},{id:'003',name:'希维尔',age:20,gender:'女'},{id:'004',name:'伊泽瑞尔',age:21,gender:'男'}]},computed:{Fpersons(){return this.persons.filter((p)=>{return p.name.indexOf(this.keyWords) !== -1})}}})</script>
</html>

可以看出，此时计算属性实现更为方便

列表排序

在计算属性的逻辑中加上排序的逻辑即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><script type="text/javascript" src="../vue.js"></script></head><body><div id="root"><input type="text" placeholder="请输入名字" v-model="keyWords"><ul><li v-for="person in Fpersons" :key="person.id">--姓名：{{person.name}} --年龄：{{person.age}} --性别：{{person.gender}}</li></ul><button @click="order = 0">原顺序</button><button @click="order = 1">降序</button><button @click="order = 2">升序</button><hr/></div></body><script type="text/javascript">new Vue({el:'#root',data:{name:'李二狗',keyWords:'',order:0, //排序方式，0原顺序，1降序，2升序persons:[{id:'001',name:'亚托克斯',age:18,gender:'男'},{id:'002',name:'维鲁斯',age:17,gender:'男'},{id:'003',name:'希维尔',age:22,gender:'女'},{id:'004',name:'伊泽瑞尔',age:21,gender:'男'}]},computed:{Fpersons(){const arr = this.persons.filter((p)=>{return p.name.indexOf(this.keyWords) !== -1})//判断是否需要排序if(this.order != 0){arr.sort((p1,p2)=>{if(this.order == 1){return p2.age - p1.age}else if(this.order == 2){return p1.age - p2.age}})}return arr}}})</script>
</html>