v-if&v-show&v-for语句

最新推荐文章于 2024-03-29 10:51:24 发布

菊花枸杞茶

最新推荐文章于 2024-03-29 10:51:24 发布

阅读量178

点赞数 2

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

本文链接：https://blog.csdn.net/qq_34227291/article/details/85248003

版权

vue.js 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

v-if&v-show&v-for语句

下面是我的学习总结和示例

备注：
v-if和v-show的区别：
v-if隐藏状态下的内容块的代码是删除掉的，显示则是再次创建代码。而v-show是通过dsiplay的block/none来控制元素的显示

v-if条件语句：条件判断

要求：该对象默认为显示。点击按钮该对象为隐藏状态，再次点击则显示。
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../js/vue.min.js"></script>
</head>
<body>
	<div id="box">
		<p v-if="show">你看见我的召唤师了吗？？？</p>
		<!-- 绑定单击事件 -->
		<button @click="btns">btn</button>
	</div>

	<script>
		new Vue({
			el:"#box",
			data:{
				// 默认显示。为false则是默认隐藏
				show:true
			},
			methods:{
				btns:function(){
					// 当前show(默认是true)不等于当前show(则是false)
					this.show = !this.show;
				}
			}
		})
	</script>
</body>
</html>

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

v-show:控制DOM的显示与否

要求：该对象默认为显示。点击按钮该对象为隐藏状态，再次点击则显示。
备注：最终效果和v-if的一样
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../js/vue.min.js"></script>
</head>
<body>
	<div id="box">
		<p v-show="show">HELLO WORLD</p>
		<!-- 绑定单击事件 -->
		<button @click="btns">按钮</button>
	</div>

	<script>
		new Vue({
			el:"#box",
			data:{
				// 默认显示。为false则是默认隐藏
				show:true
			},
			methods:{
				btns:function(){
					// 当前show(默认是true)不等于当前show(则是false)
					this.show=!this.show;
				}
			}
		})
	</script>
</body>
</html>

v-for:控制一组数据的。通过该组数据来控制循环显示一些DOM结构

要求：通过v-for在li遍历出文本和图片
备注：通过v-for来在页面打印出DOM的一些结构，可以省略不少代码
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>循环遍历出文本和图片</title>
	<script src="../js/vue.min.js"></script>
</head>
<body>
	<!-- 、、要求：通过v-for在li遍历出文本和图片 -->
	<!-- :key可以提升渲染的性能可以使用item做为值 -->
	<!-- :key要求每一项的数据都不能相同，可以在(item,index)后面加index下标，因此，:key的值也将是index,如果是频繁调用使用的话使用index做为值也不稳妥 -->
	<div id="box">
		<ul>
			<!-- 循环遍历出文本 -->
			<li v-for="(item,index) in list" :key="index">{{item}}</li>	
			<!-- 循环遍历出文本和图片 -->
			<li v-for="item in li_img" style="width: 250px;height: 300px;float: left;margin: 10px 10px;">
				<!-- 在img里面渲染图片 -->
				<img src="" alt="" :src="item.img" style="width: 100%;height: 100%;">
				<!-- 在span里面渲染文本 -->
				<span>{{item.name}}</span>
			</li>
		</ul>
	</div>

	<script>
		// 创建vue结构
		new Vue({
			el:"#box",
			data:{
				// 定义文本的数据组
				list:[
					1,2,3,4,5,6,7
				],
				// 定义文本和图片的数据组
				li_img:[
					{name:"1",img:'lol/1.png'},
					{name:"2",img:'lol/2.png'},
					{name:"3",img:'lol/3.png'},
					{name:"4",img:'lol/4.jpg'},
					
				]
			}
		})
	</script>
</body>
</html>

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

菊花枸杞茶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-if&v-show&v-for语句

v-if&amp;v-show&amp;v-for语句下面是我的学习总结和示例备注：v-if和v-show的区别：v-if隐藏状态下的内容块的代码是删除掉的，显示则是再次创建代码。而v-show是通过dsiplay的block/none来控制元素的显示v-if条件语句：条件判断要求：该对象默认为显示。点击按钮该对象为隐藏状态，再次点击则显示。示例如下：&lt;!DOCTYPE ht...
复制链接

扫一扫

专栏目录