4.vue 列表渲染

最新推荐文章于 2024-08-27 09:41:07 发布

7TribeZ

最新推荐文章于 2024-08-27 09:41:07 发布

阅读量229

点赞数

分类专栏： VUE 文章标签： vue javascript

本文链接：https://blog.csdn.net/wildand/article/details/108345305

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.用 `v-for` 渲染列表

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in stars">
					{{item}}
				</li>
			</ul>
			<h3>学生列表</h3>
			<ul>
				<li v-for="item in students">
					<h4>{{item.studentName}}</h4>
					<p>年龄：{{item.age}}---学校：{{item.school}}</p>
				</li>
			</ul>
			<h3>学生列表(带索引值)</h3>
			<ul>
        	<!-- 	item和key都可以随便取名字 -->
				<li v-for="item,key in students">
					<h4>索引值：{{key}}---{{item.studentName}}</h4>
					<p>年龄：{{item.age}}---学校：{{item.school}}</p>
				</li>
			</ul>
			<h3>循环对象</h3>
			<ul>
				<li v-for="item,key in students[0]">key:{{key}}---value:{{item}}</li>
			</ul>
			<!-- 这里冒号告知不是普通的src，而是绑定了对象里面的内容 -->
			<img :src="students[0].imgheader" >
						
			<h3>条件+循环渲染（将偶数年龄的学生渲染出来）</h3>
			<ol>
			<!-- 	先循环再判断 -->
				<!-- 如果key 绑定的是变量则一定要加冒号  字符串则不用 -->
				<li v-for ="item,index in students" v-if="item.age%2==0" :key="index">
					<h4>索引值:{{index}}----{{item.studentName}}</h4>
					<p>年龄：{{item.age}}---学校：{{item.school}}</p>
				</li>
				
			</ol>
		</div>
		
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					stars:['蔡徐坤','苏有朋','范冰冰','李晨'],
					students:[
						{
							studentName:"小明",
							age:16,
							school:"清华",
							imgheader:"https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2456468987,3284231714&fm=26&gp=0.jpg"
						},
						{
							studentName:"小黑",
							age:17,
							school:"北大"
						},
						{
							studentName:"小红",
							age:18,
							school:"浙大"
						},
						{
							studentName:"小红",
							age:15,
							school:"浙大"
						}
					]
				}
			})
		</script>
	</body>
</html>

效果：

2.用`key` 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute即可。

<!-- 用 key 管理可复用的元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换： -->
<!-- 这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-if="isLogin" class="login">
				<h3>登录</h3>
				<div >
					用户名：
					<input type="text" name="username"  value="" />
				</div>
				<div >
					密码：
					<input type="password" name="password" value="" />
				</div>
				
				<button type="button">登录</button>
			</div>
			<div v-else class="register">
				<h3>注册</h3>
				<div >
					用户名：
					<input type="text" name="username"  value="" />
				</div>
				<div >
					密码：
					<input type="password" name="password" value="" />
				</div>
				
				<button type="button">注册</button>
			</div>
			
			<button @click="togglePage" type="button">切换登录注册页</button>
		</div>
		<script src="js/vue.js" type="text/javascript">
			
		</script>
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					isLogin:true
				},
				methods:{
					togglePage:()=>{
						app.isLogin=!app.isLogin
					}
				}
			})
		</script>
	</body>
</html>

b.例如，如果你允许用户在不同的登录方式之间切换：

那么在下面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

自己动手试一试，在输入框中输入一些文本，然后按下切换按钮：

<!-- 因为上一个演示的没用，这个换成官方文档的来演示，不过依然没用。 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<template v-if="loginType === 'username'">
			  <label>Username</label>
			  <input placeholder="Enter your username" key="username-input">
			</template>
			<template v-else>
			  <label>Email</label>
			  <input placeholder="Enter your email address" key="email-input">
			</template>
			
	
		</div>
		<script src="js/vue.js" type="text/javascript">
			
		</script>
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					isLogin:true,
					loginType:"username"
				},
				methods:{
					togglePage:()=>{
						app.isLogin=!app.isLogin
						
					}
				}
			})
		</script>
	</body>
</html>

在控制台改变loginType的值不过，依然没有像文档说的input框输入被复用。可能是版本更新了。

7TribeZ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
4.vue 列表渲染

1.用v-for渲染列表我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/v...
复制链接

扫一扫