条件渲染、列表渲染

最新推荐文章于 2023-09-01 11:28:55 发布

weixin_46353442

最新推荐文章于 2023-09-01 11:28:55 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/weixin_46353442/article/details/104820627

版权

条件渲染

1）v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。

<h1 v-if="type">Vue</h1>

Vue是否显示取决于type的取值为true则显示为false则不显示
也可以用 v-else ：

<h1 v-if="type">Vue</h1>
<h1 v-else>Oh no </h1>

type的取值为true则Oh no不显示；为false则显示Oh no
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

2）v-else-if

<div id="app">
	<div v-if="type === 'A'">
	  A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		type : "",
	}
});
</script>

当前代码页面显示为： Not A/B/C（因为type为空）
若type值为A 则页面中将显示A（同理可得BC）
v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后

3）v-show

用于根据条件展示元素的选项是 v-show 指令

<div id="app">
	<h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		ok : false
	}
});
</script>

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。（当ok为true时，h1将会切换元素的css属性display：block；）
注意：v-show 不支持 <template> 元素，也不支持 v-else。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

1）数组形式的列表渲染

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<ul>
		<li v-for="item,index in items" :key="index">//:key==@bind:key
		{{index}}{{ item.msg }}//index索引值
		</li>
	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		items : [//定义items数组
			{ msg: 'Foo' },
			{ msg: 'Bar' }
		]
	}
});
</script>
</body>
</html>

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

2）对象形式的列表渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<ul>
		<li v-for="value, key in object">
			{{key}} : {{ value }}/获取到/对象属性的值和名称
		</li>
	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		object: {//定义对象
			title: 'How to do lists in Vue',
			author: 'Jane Doe',
			time: '2016-04-10'
		}
	}
});
</script>
</body>
</html>

运行结果：
在这里插入图片描述
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：

weixin_46353442

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
条件渲染、列表渲染

条件渲染1）v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。<h1 v-if="type">Vue</h1>Vue是否显示取决于type的取值为true则显示为false则不显示也可以用 v-else ：<h1 v-if="type">Vue</h1><h1 v-else&...
复制链接

扫一扫