Vue2基础-Vue2中的条件渲染与列表渲染、列表过滤、列表排序（HTML版）

已于 2022-07-06 15:05:18 修改
阅读量422 收藏 1
点赞数
分类专栏： Vue2-Vue3全套学习教程 文章标签： javascript 前端 vue.js html
于 2022-07-04 16:18:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33399435/article/details/125600914
版权

目录

Vue2基础全套教程合集：点击跳转        Vue2高级全套教程合集：点击跳转

一、Vue中的条件渲染

  1. v-if的基本使用

    • 写法：
      • v-if=“表达式”
      • v-else-if=“表达式”
      • v-else=“表达式”
    • 适用于：切换频率较低的场景。
    • 特点：不展示的DOM元素直接被移除。
    • 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

  2. v-show的基本使用

    • 写法：v-show=“表达式”
    • 适用于：切换频率较高的场景。
    • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

  3. 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- v-else和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>哈哈</div> -->

			<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>尚硅谷</h2>
				<h2>北京</h2>
			</template>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:0
			}
		})
	</script>

二、Vue中的列表渲染

1. v-for指令

  • 用于展示列表数据
  • 语法：v-for=“(item, index) in xxx” :key=“yyy”
  • 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,index) in persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>
	
			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>
	
			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
	
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>
	
		<script type="text/javascript">
			Vue.config.productionTip = false
	
			new Vue({
				el: '#root',
				data: {
					persons: [
						{ id: '001', name: '张三', age: 18 },
						{ id: '002', name: '李四', age: 19 },
						{ id: '003', name: '王五', age: 20 }
					],
					car: {
						name: '奥迪A8',
						price: '70万',
						color: '黑色'
					},
					str: "hello"
				}
			})
		</script>
	</body>

2. key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

  1. 虚拟DOM中key的作用：
      key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

    对比规则：

    • 旧虚拟DOM中找到了与新虚拟DOM相同的key：

      1. 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
      2. 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

    • 旧虚拟DOM中未找到与新虚拟DOM相同的key

      1. 创建新的真实DOM。
      2. 渲染到到页面。

  2. 用index作为key可能会引发的问题：

    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
      会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

    2. 如果结构中还包含输入类的DOM：
      会产生错误DOM更新 ==> 界面有问题。

  3. 开发中如何选择key?:

    1. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
    2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
      使用index作为key是没有问题的。
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<button @click.once="add">添加一个老刘</button>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		</script>
	</body>

在这里插入图片描述

3. 列表过滤

核心代码依旧使用的是JavaScript中数组身上的filter()函数，此处使用了watch和computed两种方式实现了对列表展示的过滤。

	<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>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			/* 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:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed实现
			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:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							// 遍历数组
							// 获取p.name名字，查找名字中是否有输入的值
							// 有则返回p对象，否则返回null	
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
	</body>

4. 列表排序

列表排序的核心代码使用的是JavaScript中数组身上的sort()函数。

	<body>
		<!-- 准备好一个容器-->
		<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="(p,index) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原顺序 1降序 2升序
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						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>

sort函数基本使用

let arr = [1,3,2,5,4,6]
arr.sort((a,b) => {
	return a-b // 升序 
	// return b-a // 降序
})

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

大脑不能为空
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js实现表格渲染的方法
10-18
今天小编就为大家分享一篇对Vue.js实现表格渲染的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
b站黑马Vue2后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）
weixin_72322475的博客
01-30 3302
总结b站黑马Vue2后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）
基于ele封装表格（Vue2）
最新发布
a52104的博客
04-22 1218
el-table-column v-if="indexIsShow" label="序号" type="index" show-overflow-tooltip width="60"><el-table-column v-if="showHandleButton" fixed="right" label="操作" :width="handleColWidth">* @param showHandleButton 是否显示操作列。* @param indexIsShow 是否显示索引列。
如何在Vue模板中渲染HTML标签？
2301_77795034的博客
06-08 5357
另外需要注意的是，由于v-html指令将父组件的数据作为HTML解析，因此要确保父组件中的数据是可信的，以避免安全问题。需要注意的是，使用v-html指令渲染HTML代码时需要格外小心，因为它可以允许任意的HTML和JavaScript代码在你的页面上执行。总结起来，v-html指令是Vue中非常有用的一个指令，它可以让父组件将数据作为HTML解析并渲染到子组件中。例如，如果你有一个动态生成的列表，其中某些项目包含链接或图像，你可以使用v-html指令来渲染整个列表。首先，让我们来看一个简单的例子。
Vue列表渲染
qq_54334713的博客
06-20 1244
vue官方文档解读
vue实现二维数组表格渲染
温暖前端的博客
02-03 1210
指令生成表头和表格行，并在每个单元格中显示对应的值。使用Vue 3的组合式API。在模板中，使用嵌套的。在Vue中渲染二维数组表格可以采用嵌套的。的语法来迭代二维数组中的行数据，并在。的语法来迭代每行中的列数据，并在。指令来遍历二维数组。标签内部，我们使用嵌套的。数组则表示表格的数据。指令来渲染二维数组。指令遍历每行中的列。
vue列表数据发生变化指令没有更新问题及解决方法
10-15
在上述例子中，`:key='index'`可能导致问题，因为当过滤或排序列表时，尽管数据发生了变化，但索引可能保持不变，导致Vue认为元素没有变化，从而不触发指令的更新。 **问题分析：** 在Vue的`v-for`循环中，`:key`...
Vue数组更新及过滤排序功能
12-01
在处理数组时，Vue 提供了一系列的数组变异方法，这些方法直接修改原数组并自动触发视图更新，这对于列表渲染非常有用。 1. **变异方法(Mutation Methods)**: - `push()`: 向数组末尾添加一个或多个元素，并返回新...
实例分析vue循环列表动态数据的处理方法
10-17
6. **列表渲染优化**：使用`key`属性可以提高列表渲染性能，特别是当列表数据频繁更新时。Vue会基于`key`值来跟踪每个节点的身份，从而重用或重新排序已有元素，而不是总是销毁和创建新元素。 综上所述，Vue.js提供...
Vue-组件高级(下）商品列表案例
07-22
在商品列表的排序或过滤功能中，我们可能需要在数据改变后等待DOM更新，确保操作基于最新的视图状态。例如，`this.items = newItems; this.$nextTick(() => { ... })`，在这个回调函数中，我们可以安全地访问已更新...
vue实现表格过滤功能
10-16
- `<ul>`和`<li>`：用于渲染过滤后的书籍列表。`v-for`指令遍历`filterBooks`计算属性中的每一项，并将其显示出来。 - 排序按钮：通过`@click`事件监听器调用`setOrderType`方法，改变`orderType`的值以切换排序...
数据渲染到element组件表格里面
qq_54030660的博客
05-20 736
第一步 先创建一个列表 第二步 把数据渲染到这个列表 第三步 把列表绑定到表格里面
vue 使用 创建二维数组响应数据 渲染 echarts图标
tengyuxin的博客
10-03 1236
目前我遇到的情况就是用动态的二维数组数据渲染echarts图标，我们从后端收到的接口一般是个一维数组，需要手动构建并且保证响应式。接下来我做了个案例。
【VUE2】vue中render函数 渲染html代码的三种方式
qq_24719349的博客
10-08 3523
vue render的三种输出方式
vue2.0怎么渲染html,vue采坑之——vue里面渲染html 并添加样式
weixin_42521276的博客
06-27 1832
在工作中，有次遇到要把返回的字符串分割成两部分，一部分用另外的样式显示。这时候，我想通过对得到字符串进行处理，在需要特别样式的字符串片段用html标签(用的span)包裹起来再通过变量绑定就好了。不过此时绑定变量的vue指令要用v-html。测试方案的过程很顺利。不过后面单独为自动添加的标签(span)设定需要的css样式时(直接在vue单页面的css区域加的样式)，并没有起作用，浏览器检查元素s...
Vue.js 2.0 服务端渲染
2201_75866484的博客
04-17 658
Vue的服务端渲染默认非常快，但是你可以通过缓存渲染好的组件进一步提高性能。这被认为是一种先进的功能，但是，如果缓存了错误的组件（或者正确的组件带有错误的内容）将导致应用渲染出错。其优势是预渲染的设置更加简单，可以保持前端是一个完整的静态站。可以用Webpack的代码拆分避免强制用户下载整个单页面应用，但是，这样也远没有下载个单独的预先渲染过的HTML文件性能高。现在，应该理解服务端渲染背后的基本概念了。如果你只是用服务端渲染来改善一个少数的营销页面（如 首页，关于，联系 等等）的SEO，那你可以用。
vue中渲染html网页
热门推荐
大炮哥的博客
06-10 1万+
有的时候我们想在vue中直接显示一个html的网页，如果用富文本方式，那么内容就会太多，那么怎么处理呢? 直接上代码步骤一： 新建一个vue文件，命名为"HtmlPanel.vue"，内容如下 步骤二 使用上述的vue组件 在你的vue页面中添加如下代码 OK！就2个步骤，有帮助的话，麻烦点个赞。此外 如果遇到跨域，那么请到以下这篇文章 https://blog.csdn.net/u010775335/article/details/110857411HtmlPanel.vue中使用到的this.$http
vue 做后台管理系统2维数组表单（动态渲染可编辑单元格的Table）
IT博客技术分享
03-28 4633
先上效果图： 说明： 横 和 纵 都是遍历出来的 从数据库取出来的 input 是一个个填的 最下面有一个提交保存的按钮 跟这个表格很类似： 一、问题是这样的：后台传了xArr = [x1, x2,...,xn]和yArr = [y1, y2, ..yn]两个数组，前端要渲染出表格并且可以填写每个单元格的值，然后按照一定数据结构保存...
12.列表渲染
s12345672的博客
08-17 318
列表渲染 1. 基本列表 条件渲染： 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="表达式"
Vue.js 2.x官方教程：从基础到深入详解
- 条件与循环：v-if、v-show用于条件渲染，v-for则用于列表渲染，实现数据驱动的视图更新。 3. **组件开发**： - 组件化是Vue的核心特性，用于组织和复用代码。组件有生命周期管理，如beforeCreate、created等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值