首页 > 其他分享 >Vue学习计划-Vue2--Vue核心(五)条件、列表渲染、表单数据

Vue学习计划-Vue2--Vue核心(五)条件、列表渲染、表单数据

时间:2023-12-08 12:32:23浏览次数:40  
标签:key Vue obj name DOM -- age Vue2 id

1. 条件渲染

  1. v-if

    1. v-if="表达式"
    2. v-else-if = "表达式"
    3. v-else = "表达式" 适用于:切换频率较低的场景

    特点:不显示dom元素,直接被删除

    注意:v-if和v-else-if、v-else一起使用,但要求结构不能被打断 v-if和template一起使用, v-show不可以

  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>Document</title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- v-show: 控制元素style样式中display属性实现显示与隐藏 -->
			<p v-show="1 !== 3">这是v-show文本</p>
			<p v-show="false">这是v-show文本</p>
			<hr>
			<!-- v-if: 对元素的删除与渲染 -->
			<p v-show="1 !== 3">这是v-if文本</p>
			<p v-if="true">这是v-if文本</p>
			<hr>
			<!-- v-if, v-else 的使用 -->
			<button @click="n++">点击if事件</button>
			<!-- <p v-if="n === 1">	8:00</p>
			<p v-if="n === 1">	9:00</p>
			<p v-if="n === 3">	10:00</p> -->
			<p v-if="n === 1">	8:00</p>
			<p v-else-if="n === 2">	9:00</p>
			<p v-else-if="n === 3">	10:00</p>
			<p v-else>其他时间</p>
			<hr>
			<!--v-if可以和 template使用,v-show不可以 -->
			<!-- <p v-if="n === 1"> 小红</p>
			<p v-if="n === 1"> 小李</p>
			<p v-if="n === 1"> 小王</p> -->
	
			<!-- template模板,不改变页面结构 -->
			<!-- <template v-show="n === 1"> -->
			<template v-if="n === 1">
				<p> 小红</p>
				<p> 小李</p>
				<p> 小王</p>
			</template>	
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					n: 0,
				},
			})
		</script>
	</body>
	</html>

2. 列表渲染

  1. v-for
    1. 用于展示列表数据
    2. 语法:v-for="(val, index) in arr" :key = yyy
    3. 可遍历:数组,对象,字符串(用的很少),指定次数(用的很少) 示例:
	<!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 src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<ul>
				<li v-for="(p, index) in persons" :key="index">
					{{ p.name }} - {{ p.age }}
				</li>
			</ul>
			<hr>
	
			<!-- 遍历对象 -->
			<ul>
				<li v-for="(v, index) in obj" :key="index">
					{{ index }} - {{ v }}
				</li>
			</ul>
			<hr>
	
			<!-- 遍历字符串(比较少用) -->
			<ul>
				<li v-for="(v, index) in 'ahggg'" :key="index">
					{{ index }} - {{ v }}
				</li>
			</ul>
			<hr>
	
			<!-- 遍历数字(比较少用) -->
			<ul>
				<li v-for="(v, index) in 5" :key="index">
					{{ index }} - {{ v }}
				</li>
			</ul>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					persons: [
						{ id: '001', name: '小红', age: 19 },
						{ id: '002', name: '小明', age: 20},
						{ id: '003', name: '小亮', age: 21}
					],
					obj: {
						name: '小丽',
						age: 19,
						sex: '女'
					}
				}
			})
		</script>
	</body>
	</html>
  1. key作用与原理

    1. 虚拟DOM中key的作用:
      1. key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,
      2. 随后Vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较,比较规则如下:
    2. 对比规则:
      1. 旧虚拟DOM中找到与新虚拟DOM相同的key:
        • 若虚拟DOM中的内容没有变,直接使用之前的真实DOM
        • 若虚拟DOM中的内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
      2. 旧虚拟DOM中未找到与新虚拟DOM相同的key:
        • 创建新的真实DOM,随后渲染到页面 key值原理-index.png key值原理-id.png
  2. 用index作为key可能会引发的问题:

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

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

示例:

	<!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 src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 唯一值作为key值: 逆序添加 -->
			<button @click.once="handleClickUnshiftPerson">unshift添加person</button>
			<ul>
				<!-- <li v-for="(p, index) in persons" :key="p.id"> -->
				<li v-for="(p, index) in persons" :key="index">
					{{ p.name }} - {{p.age }}
					<input type="text">
				</li>
			</ul>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					persons: [
						{ id: 1, name: '小红', age: 19 },
						{ id: 2, name: '小梁', age: 20 },
						{ id: 3, name: '小名', age: 21 },
					]
				},
				methods: {
					handleClickUnshiftPerson(){
						this.persons.unshift({id: 4, name: '小丽', age:22})
					}
				},
			})
		</script>
	</body>
	</html>

3. 收集表单数据

  1. 若:<input type = "text"/>, 则v-model收集的是value值,用户输入的就是value值。
  2. 若:<input type = "radio"/>, 则v-model收集的是value值,且要给标签配置value值。
  3. 若:<input type = "checkbox"/>
    1. 没有配置input的value属性,v-model收集的就是checked(勾选 or 未勾选, 是布尔值)
    2. 配置input的value属性:
      • v-model 的初始值是非数组,那么收集的就是checked(勾选 or 未勾选, 是布尔值)
      • v-model 的初始值是数组,那么收集的就是value组成的数组
  4. 备注:v-model的三个修饰符:
    1. lazy: 失去焦点再收集数据
    2. number: 输入字符串转为有效的数字
    3. trim: 输入首尾空格过滤

示例:

	<!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 src="./vue.js"></script>
	</head>
	<body>
	  <div id="app">
	    <form @submit.prevent="demo">
	      <!-- 完整写法 -->
	      <!-- <label for="demo">账号:</label> -->
	      <!-- <input type="text" id="demo"> -->
	      账号:<input type="text" v-model.trim="obj.account">1{{ obj.account }}2<br><br>
	      密码:<input type="password" v-model="obj.password"> {{ obj.password }}<br><br>
	      年龄:<input type="number" v-model.number="obj.age"> {{ typeof(obj.age) }}<br><br>
	      性别:
	        男<input type="radio" name="sex" v-model="obj.sex" value="male">
	        女<input type="radio" name="sex" v-model="obj.sex" value="female">
	        {{ obj.sex }}<br><br>
	      爱好:
	      <!-- 多选框的初始值影响v-model收集回来的值 -->
	        学习<input type="checkbox" v-model="obj.hobby" value="study" id="demo">
	        打游戏<input type="checkbox" v-model="obj.hobby" value="game">
	        读书<input type="checkbox" v-model="obj.hobby" value="read">
	        {{ obj.hobby }}<br><br>
	      家乡:
	        <select v-model="obj.city">
	          <option value="">请选择家乡</option>
	          <option value="sjz">石家庄</option>
	          <option value="xt">邢台</option>
	          <option value="hd">邯郸</option>
	          <option value="cd">承德</option>
	        </select>
	        {{ obj.city }}
	        <br><br>
	      其他信息:
	        <textarea v-model.lazy="obj.other"></textarea> {{ obj.other }}
	        <br><br>
	      <input v-model="obj.argee" type="checkbox"> 阅读并接受<a rel="nofollow" href="http://www.baidu.com">《用户协议》</a> {{ obj.argee }}
	      <br><br>
	      <button>提交</button>
	    </form>
	  </div>
	  <script>
	    const vm = new Vue({
	      el: "#app",
	      data:{
	        obj:{
	          account: '',
	          password: '',
	          age: 18,
	          sex: 'female',
	          hobby: [],
	          city:'',
	          other: '',
	          argee: false
	        }
	      },
	      methods: {
	        demo(){
	          console.log(this.obj);
	        }
	      },
	    })
	  </script>
	</body>
	</html>

标签:key,Vue,obj,name,DOM,--,age,Vue2,id
From: https://blog.51cto.com/u_16330303/8735464

相关文章

  • 自定义idea工具栏图标
    把我们常用的一些图标放在工具栏,随用随点可以提升工作效率,以下是自定义idea工具栏图标的步骤进入工具栏菜单设置页面添加图标:如果我们想添加一个push按钮,就搜索push,点击确定按钮添加push调节按钮到合适位置,点击OK完成添加按钮已经添加完毕......
  • 产品说明书制作流程:从构思到完善的全面指南
    摘要:产品说明书是一种重要的沟通工具,用于向用户提供关于产品功能、用途和使用方法的详细信息。本文将介绍产品说明书制作的全面流程,从构思到完善,帮助您了解如何创建一份准确、清晰和易于理解的产品说明书。第一部分:构思与计划在制作产品说明书之前,首先需要进行构思和计划。这个阶段......
  • 网站帮助中心搭建指南:从规划到实施的步骤解析
    摘要:随着互联网的迅速发展,网站帮助中心逐渐成为企业提供客户支持和解决问题的重要渠道。本文将提供一个全面的指南,介绍网站帮助中心搭建的步骤和要点,帮助你规划、设计和实施一个高效且用户友好的帮助中心。第一步:需求分析和规划在搭建网站帮助中心之前,需要进行需求分析和规划。目标......
  • pandas
    目录Pandas处理EXCEL表格的常用命令Pandas处理EXCEL表格的常用命令'''1.导入pandas库'''importpandasaspd'''2.导入文件'''#设置文件名称file="运费明细表.xlsx"df=pd.read_excel(file,sheet_name='运费明细',skiprows=3,......
  • 代码漏洞扫描工具sonarqube在本地环境的使用
    sonarqube可以与源码管理工具gitlab集成,实现提交代码后自动扫描检测代码的相关漏洞。该CI/CD过程大致为:1、研发人员提交源码至gitlab服务器—>2、gitlabrunner执行指定脚本(由项目的.gitlab-ci.yml配置文件指定具体内容,如编译项目、开启代码检测) —>3、sonar-scanner对项目进......
  • 队列
    队列是先进先出(FIFO,First-In-First-Out)的线性表。队列只允许在后端(称为back,rear,tail)进行插入操作,在前端(称为front,head)进行删除操作。队列的操作入队:在队尾(称为back)进行插入或添加操作;出队:在队头(称为front)进行删除操作。数组模拟队列intq[SIZE],front=1,back=0;  ......
  • 20211314王艺达 实验四 2
    任务详情基于华为鲲鹏云服务器CentOS中(或Ubuntu),使用LinuxSocket实现:Web服务器的客户端服务器,提交程序运行截图实现GET即可,请求,响应要符合HTTP协议规范服务器部署到华为云服务器,浏览器用本机的把服务器部署到试验箱。(加分项)具体实现代码:copy.c:/*copy.c:**Copyright......
  • 2023 年 12 月训练记录
    2023年12月训练记录怎么就寄了呢。没救了。不能再摆了。CF1824ELuoTianyiandCartridge我们对最小值做扫描线,现在就转化成了使得\(\sumb+\sumd\)最大。我们考虑点与边合法的充要条件。注意到假设有\(k\)个点,\(k-1\)条边,只要满足对于每条边的两部分都有点就是合......
  • 2023-2024-1 20211327 实验四 Web服务器2
    实验四Web服务器2Web服务器的客户端服务器web_server.c#include<stdio.h>#include<stdlib.h>#include<string.h>#include<unistd.h>#include<arpa/inet.h>#definePORT8080#defineBUFFER_SIZE1024voidhandle_client(intclient_socket){......
  • 浅谈WPF之控件拖拽与拖动
    使用过office的visio软件画图的小伙伴都知道,画图软件分为两部分,左侧图形库,存放各种图标,右侧是一个画布,将左侧图形库的图标控件拖拽到右侧画布,就会生成一个新的控件,并且可以自由拖动。那如何在WPF程序中,实现类似的功能呢?今天就以一个简单的小例子,简述如何在WPF中实现控件的拖拽和拖......