【vue】v-model、v-if、v-for、过滤器（12.31下午实训）

小张哎！

已于 2022-01-26 20:28:02 修改

阅读量606

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

于 2021-12-31 16:46:07 首次发布

本文链接：https://blog.csdn.net/qq_45746744/article/details/122259145

版权

vue 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

双向绑定指令 v-model

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。
在这里插入图片描述

注意：v-model 指令只能配合表单元素一起使用！
为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{username}}
			<input type="text" v-model="username" />
			<br />
			<!-- v-model 双向数据绑定-->
			<select v-model="province">
				<option value="1">北京</option>
				<option value="2">上海</option>
				<option value="3">山东</option>
			</select>
			<br />
			<input v-model.number="age" />
			<br />
			<input v-model.trim="msg" />
		</div>
		
		<script type="text/javascript" src="./js/vue.js" ></script>
		
		<script>
			const vm = new Vue({
				el:'#app', 
				data:{ 
					username:'',
					province:1,
					age:1,
					msg:''
				},
				
			});
			
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

条件渲染指令v-if

v-if 可以单独使用，或配合 v-else 指令一起使用：
v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<span v-if="Math.random()>0.5">
				大于0.5
			</span>
			<span v-else=>
				小于0.5
			</span>
			<span v-if="type==='A'">A</span>
			<span v-else-if="type==='B'">B</span>
			<span v-else-if="type==='C'">C</span>
			<span v-else=>D</span>
		</div>
		
		<script type="text/javascript" src="./js/vue.js" ></script>
		
		<script>
			const vm = new Vue({
				el:'#app', 
				data:{ 
					type:'B'
				},
				
			});
			
		</script>
	</body>
</html>

效果如下：
在这里插入图片描述

列表渲染指令 v-for

v-for 指令，用来辅助开发者基于一个数组来循环渲染相似的 UI 结构。
v-for 指令需要使用 item in items 的特殊语法，其中：
items 是待循环的数组 item 是当前的循环项
在这里插入图片描述

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items.
在这里插入图片描述

使用 key 维护列表的状态
当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性：
在这里插入图片描述

key 的注意事项
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为index 的值不具有唯一性）
⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--table>tr>td*4之后tab可快速创建-->
			<table border="1">
				<!--  v-for='(当前元素，索引) in 数组名'-->
				<tr v-for='(stu,index) in stus' :key='stu.id'>
					<td>{{index+1}}</td>
					<td>{{stu.id}}</td>
					<td>{{stu.name}}</td>
					<td>{{stu.sex}}</td>
					<td>{{stu.birthday}}</td>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript" src="./js/vue.js" ></script>
		
		<script>
			const vm = new Vue({
				el:'#app', 
				data:{ 
					stus:[
						{id:10,name:'张三',sex:'男',birthday:'1999-3-4'},
						{id:11,name:'李四',sex:'男',birthday:'1999-6-4'},
						{id:12,name:'王五',sex:'男',birthday:'1999-3-8'}
					]
				},
				
			});
			
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

过滤器

过滤器（Filters）常用于文本的格式化。
例如：
hello -> Hello

定义过滤器

在创建 vue 实例期间，可以在 filters 节点中定义过滤器
在这里插入图片描述

过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--实现首字母大写-->
		<div id="app">
			{{msg  | upper}}
		</div>
		
		<script type="text/javascript" src="./js/vue.js" ></script>
		
		<script>
			const vm = new Vue({
				el:'#app', 
				data:{ 
					msg:'hello'
				},
				filters:{    //定义过滤器
					upper(str){   //str是msg数据
						return str.charAt(0).toUpperCase()+str.slice(1);
					}
				}
			});
			
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

品牌列表的案例

用到的知识点
1、bootstrap 4.x 相关的知识点：
卡片（Card）、表单相关（Forms）、按钮（Buttons）、表格（Tables）
2、vue 指令与过滤器相关的知识点：
插值表达式、属性绑定、事件绑定、双向数据绑定、修饰符、条件渲染、列表渲染、全局过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table border="1">
				<tr v-for="brand in brandlist" :key="brand.id">
					<td>{{brand.id}}</td>
					<td>{{brand.brandname}}</td>
					<td>{{brand.state}}</td>
					<td>{{brand.addtime}}</td>
					<td><a href="#">删除</a></td>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript" src="./js/vue.js" ></script>
		
		<script>
			const vm = new Vue({
				el:'#app', 
				data:{ 
					brandlist:[   //品牌列表
						{id:1,brandname:'奔驰',state:true,addtime:new Date()},
						{id:2,brandname:'宝马',state:true,addtime:new Date()},
						{id:3,brandname:'奥迪',state:false,addtime:new Date()},
					]
				},
				filters:{    //定义过滤器
					
				}
			});
			
		</script>
	</body>
</html>

暂时运行情况如下：
在这里插入图片描述

小张哎！

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【vue】v-model、v-if、v-for、过滤器（12.31下午实训）

双向绑定指令 v-modelvue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。注意：v-model 指令只能配合表单元素一起使用！为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：①.number 自动将用户的输入值转为数值类型 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> &
复制链接

扫一扫