03、Vue3.x初步【条件，循环？】

最新推荐文章于 2024-03-29 17:47:00 发布

银色种子

最新推荐文章于 2024-03-29 17:47:00 发布

阅读量84

点赞数

本文链接：https://blog.csdn.net/silvercell/article/details/115866603

版权

Vuejs 从入门到应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

条件语句

把一段非常简单的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.csdn.net/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>

总结

v-if 的使用
v-for 的使用， data里定义循环数据，找到要渲染的标签，使用v-for指令渲染标签

结合的小例子，就能看出来前几课的知识有没有掌握。路，我领了，脚得你自己迈。有没掌握的
老规矩，大不了以后工作了耽误点约会和吃美食的时间… 🕐
Author: Silvercell ，欢迎来到的抵抗路，好好加油，祝，编程进步，技术提升，加薪升职

银色种子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
03、Vue3.x初步【条件，循环？】

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

扫一扫