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

FE_Vue学习笔记 条件渲染[v-show v-if] 列表渲染[v-for] 列表过滤 列表排序

1 条件渲染 v-show v-if

使用template可以使其里面的内容在html的结构中不变。条件渲染:

  1. v-if
    1)v-if=“表达式”
    2)v-else-if=“表达式”
    3)v-else {}
    适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“打断”。
  2. v-show
    写法:v-show=“表达式”
    适用于:切换频率较高的场景。特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉。
  3. 备注:使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到
<!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></title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="conditional-rendering"><!-- 使用v-show做条件渲染 切换频率高--><!--    <h1 v-show="judge">hello {{ name }}</h1>--><!-- 使用v-if做条件渲染 切换频率低--><!--    <h1 v-if="judge">hello {{ name }}</h1>--><h2>当前的n值是:{{ n }}</h2><button @click="n++">点我n+1</button><!-- v-if和v-else-if --><div v-if="n === 1">Angular</div><div v-else-if="n === 2">React</div><div v-else-if="n === 3">Vue</div><div v-else>other</div><!-- v-if与template结合 --><template v-if="n === 1"><h2>hello-zhaoshuai-lc</h2></template>
</div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#conditional-rendering',data: {name: 'zhaoshuai-lc@inspur.com',judge: false,n: 1}})
</script>
</body>
</html>

2 列表渲染 v-for

  1. 用于展示列表数据
  2. 语法:v-for=“(item,index) in xxx” :key=“yyy”
  3. 可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for"><ul><li v-for="item in personList" :key="item.id">{{ item.name }} - {{ item.age }}</li></ul>
</div>
<script type="text/javascript">new Vue({el: '#v-for',data: {personList: [{id: 1001, name: 'zhaoshuai-la', age: 101},{id: 1002, name: 'zhaoshuai-lb', age: 102},{id: 1003, name: 'zhaoshuai-lc', age: 103}]}})
</script>
</body>
</html>

在这里插入图片描述

    <ul><li v-for="(a, b) in personList">{{ a }} - {{ b }}</li></ul>

在这里插入图片描述
上面的key可以做一个替换:

    <ul><li v-for="(item, index) in personList" :key="index">{{ item.name }} - {{ item.age }}</li></ul>

in 也可以替换为 of:

    <ul><li v-for="(item, index) of personList" :key="index">{{ item.name }} - {{ item.age }}</li></ul>

除了数组还可以遍历对象:

<body>
<div id="v-for"><ul><li v-for="(value, key) of car" :key="key">{{ key }} - {{ value }}</li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {car: {name: '奥迪A8',price: '70万',color: '黑色'}}})
</script>
</body>
</html>

在这里插入图片描述
测试遍历字符串:

  <ul><li v-for="(char, index) of str" :key="index">{{ index }} - {{ char }}</li></ul>
str: 'hello'

在这里插入图片描述

3 这里对于列表渲染的key的原理做一个说明

<body>
<div id="v-for"><button @click.once="add">添加一个 zhaoshuai-ld</button><ul><li v-for="(item, index) of personList" :key="index">{{ item.name }} - {{ item.age }}</li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {personList: [{id: 1001, name: 'zhaoshuai-la', age: 101},{id: 1002, name: 'zhaoshuai-lb', age: 102},{id: 1003, name: 'zhaoshuai-lc', age: 103}]},methods: {add() {let person = {id: 1004, name: 'zhaoshuai-ld', age: 104}this.personList.unshift(person)}}})
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
看似没有问题,其实问题很大,如下:遍历列表时key的作用(index作为key)

<body>
<div id="v-for"><button @click.once="add">添加一个 zhaoshuai-ld</button><ul><li v-for="(item, index) of personList" :key="index">{{ item.name }} - {{ item.age }}<input type="text"></li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {personList: [{id: 1001, name: 'zhaoshuai-la', age: 101},{id: 1002, name: 'zhaoshuai-lb', age: 102},{id: 1003, name: 'zhaoshuai-lc', age: 103}]},methods: {add() {let person = {id: 1004, name: 'zhaoshuai-ld', age: 104}this.personList.unshift(person)}}})
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

遍历列表时key的作用(id作为key)

    <ul><li v-for="(item, index) of personList" :key="item.id">{{ item.name }} - {{ item.age }}<input type="text"></li></ul>

在这里插入图片描述
在这里插入图片描述

3.1 面试题:react、Vue中的key有什么作用?(key的内部原理)

  1. 虚拟DOM中key的作用:
    key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
    1)旧虚拟DOM中找到了与新虚拟DOM相同的key:
 若虚拟DOM中内容没变,直接使用之前的真实DOM若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM

2)旧虚拟DOM中未找到与新虚拟DOM相同的key:

创建新的真实DOM,随后渲染到页面
  1. 用index作为key可能会引发的问题:

1)若对数据进行逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 > 界面效果没问题,但效率低。
2)如果结构中还包含输入类的DOM:会产生错误DOM更新 > 界面有问题。

  1. 开发中如何选择key?
    1)最好使用每条数据的唯一标识作为key,比如说id、手机号、身份证号、学号等唯一值。
    2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表中用于展示,使用index作为key是没有问题的。

4 列表过滤

4.1 用watch实现列表过滤

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for"><input type="text" placeholder="请输入名字" v-model="keyWorld"><ul><li v-for="(item, index) of filterPersonList" :key="item.id">{{ item.name }} - {{ item.age }}</li></ul>
</div>
<script type="text/javascript">new Vue({el: '#v-for',data: {keyWorld: '',personList: [{id: '001', name: '马冬梅', age: 19, sex: '女'},{id: '002', name: '周冬雨', age: 20, sex: '女'},{id: '003', name: '周杰伦', age: 21, sex: '男'},{id: '004', name: '温兆伦', age: 22, sex: '男'}],filterPersonList: []},watch: {keyWorld: {immediate: true,handler(newValue, oldValue) {this.filterPersonList = this.personList.filter((item) => {return item.name.indexOf(newValue) !== -1})}}}})
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

4.2 用computed实现列表过滤

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for"><input type="text" placeholder="请输入名字" v-model="keyWorld"><ul><li v-for="(item, index) of filterPersonList" :key="item.id">{{ item.name }} - {{ item.age }}</li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {keyWorld: '',personList: [{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: {filterPersonList() {return this.personList.filter((item) => {return item.name.indexOf(this.keyWorld) !== -1})}}})
</script>
</body>
</html>

5 列表排序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for"><input type="text" placeholder="请输入名字" v-model="keyWorld"><button @click="sortType = 2">升序</button><button @click="sortType = 1">降序</button><button @click="sortType = 0">原序</button><ul><li v-for="(item, index) of filterPersonList" :key="item.id">{{ item.name }} - {{ item.age }}</li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {keyWorld: '',sortType: 0, // 0-原顺序 1-降序 2-升序personList: [{id: '001', name: '马冬梅', age: 19, sex: '女'},{id: '002', name: '周冬雨', age: 24, sex: '女'},{id: '003', name: '周杰伦', age: 55, sex: '男'},{id: '004', name: '温兆伦', age: 12, sex: '男'}]},computed: {filterPersonList() {let filterList = this.personList.filter((item) => {return item.name.indexOf(this.keyWorld) !== -1})// 判断是否需要排序if (this.sortType) {filterList.sort((a, b) => {return this.sortType === 1 ? b.age - a.age : a.age - b.age})}return filterList}}})
</script>
</body>
</html>

在这里插入图片描述

http://www.lryc.cn/news/66713.html

相关文章:

  • 基于C++实现旅行线路设计
  • Lenovo m93 mini 电脑 Hackintosh 黑苹果efi引导文件
  • 【论文阅读】COPA:验证针对中毒攻击的离线强化学习的稳健策略
  • Java笔记_18(IO流)
  • 前端vue3一键打包发布
  • 13 | visual studio与Qt的结合
  • 纯手动搭建大数据集群架构_记录019_集群机器硬盘爆满了_从搭建虚拟机开始_做个200G的虚拟机---大数据之Hadoop3.x工作笔记0179
  • 变量大小:—揭开不同类型的字节数
  • 23.自定义指令
  • OPNET Modeler 例程——停等协议的建模和仿真
  • JavaScript - 基础+WebAPI(笔记)
  • API调用的注意事项及好处!
  • ros2中常用命令,与ros1的区别
  • 利用MySQL语句批量替换指定wordpress文章中的图片路径
  • Linux必会100个命令(六十)curl
  • 物联网硬件安全与整改梳理(1)
  • 【大数据学习篇3】HDFS命令操作与MR单词统计
  • java中设计模式总结
  • ChatGPT不到1分钟生成全部代码,你就说慌不慌吧?
  • Python进阶知识(1)—— 什么是爬虫?爬文档,爬图片,万物皆可爬,文末附模板
  • 如何在andorid native layer中加log function.【转】
  • FreeRTOS 空闲任务
  • 快速生成HTML结构语法、快速生成CSS样式语法以及emmet
  • 企业直播该如何做?硬件设备、网络环境、设备连接和观看权限等整个直播流程教程
  • 第4章 静态网站部署
  • 免费版的mp3格式转换器有哪些?这三款软件帮你实现!
  • 版本控制器git
  • 接口自动化测试 vs. UI自动化测试:为什么前者更快,更省力,更稳定?
  • 看Chat GPT解答《情报学基础教程》课后思考和习题
  • 线程同步、生产者消费模型和POSIX信号量