03、Vue3.x初步【条件，循环？】_vue3 条件模块-优快云博客

本文链接：https://blog.youkuaiyun.com/silvercell/article/details/115866603

本文通过实例展示了Vue.js中v-if与v-for指令的应用，包括如何使用v-if控制元素的显示与隐藏，并结合过渡效果，以及如何利用v-for进行数据循环渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

条件语句

把一段非常简单的if ,写的如此繁琐，我就想问还有谁？
细细品，你细品，过度效果都来了一波，发现了么？
老规矩，
- 1. v-if 指令绑定到data
- 1. data 上面控制 bool, true/false
- 1. v-on: 事件监听，触发，语句，更改以用show控制的p标签的显示、隐藏
- 1. 彩蛋， transition , 过渡效果 hhhc

<!DOCTYPE html>
<html>
<head>
	<title>Vue入门到应用</title>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

	<div id="container">
		
		// 1 
		<span v-if="is_silvercell"> 我是 silvercell </span>
		<span v-if="is_rubbish"> 我是 rubbish? </span>
		
		// 3
		<button v-on:click="show = !show"> 收起/展开</button>
		<transition name="fade">
			<p v-if="show">hello</p>
		</transition>

	</div>

</body>

<script type="text/javascript">

	const HelloVueApp = {

		data(){
			return {
				// 2
				is_silvercell: true,
				is_rubbish: false,
				show: true
			}
		}

	}

	Vue.createApp(HelloVueApp).mount('#container')
</script>

<style type="text/css">
	.fade-enter-active,
	.fade-leave-active {
	  transition: opacity 0.5s ease;
	}

	.fade-enter-from,
	.fade-leave-to {
	  opacity: 0;
	}
</style>
</html>

循环语句

指令 v-for:
非常重要，很多的条目渲染都要用这个。一定要学会啊！
反正现在学不会以后还是要来查的，大不了耽误约会，大餐呗

数据在哪里
循环的标签是什么
循环并数据绑定渲染

<!DOCTYPE html>
<html>
<head>
	<title>Vue入门到应用</title>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

	<div id="container">
		<div>
			<span v-if="is_silvercell"> 我是 silvercell </span>
			<span v-if="is_rubbish"> 我是 rubbish? </span>
			<button v-on:click="show = !show"> 收起/展开</button><br><br>
		</div>
		<transition name="fade">
			<div v-if="show">
				<table BORDER=1 style="border-collapse:collapse" >
				    <tr>
				        <th>今天周几?</th>
				        <th>做什么?</th>
				    </tr>
				    // 2
				    <tr v-for="item in todos">
				        <td>{{item.time}}</td>
				        <td>{{item.do}}</td>
				    </tr>
				</table>
			</div>
		</transition>
	</div>

</body>

<script type="text/javascript">

	const HelloVueApp = {

		data(){
			return {
				is_silvercell: true,
				is_rubbish: false,
				show: true,
				// 1 
				todos: [
					{time:'Friday', do:"learn from https://blog.youkuaiyun.com/silvercell"},
					{time: 'Sunday', do:"learn silvercell's blog"},
					{time: 'Saturday', do:"discuss in silvercell's QQ-group"}
					
				]
			}
		}

	}

	Vue.createApp(HelloVueApp).mount('#container')
</script>

<style type="text/css">
	.fade-enter-active,
	.fade-leave-active {
	  transition: opacity 0.5s ease;
	}

	.fade-enter-from,
	.fade-leave-to {
	  opacity: 0;
	}

	#container {
		width: 700px;
		height:700px;
		margin: 0 auto;
	}

</style>
</html>