Vue3从零开始系列-04_条件与循环

最新推荐文章于 2022-10-16 00:57:16 发布

NormalCode

最新推荐文章于 2022-10-16 00:57:16 发布

阅读量141

点赞数

分类专栏： Vue3从零开始系列文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_28809149/article/details/120175094

版权

Vue3从零开始系列专栏收录该内容

8 篇文章 1 订阅

订阅专栏

JavaScript 数据类型：数值、字符串值、数组、对象等等

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 

var x = true;			// boolean
var y = false;

参考:资料

这里我们先说布尔值，真true，假false。

具体用到VUE里条件判断，当逻辑语句呈现的布尔值为什么的什么执行。

类似伪代码

if(我是男生)
{
	进男厕所()
}else{
	进女厕所()
}

Vue条件判断

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>04_VUE3_Study_条件与循环</title>
	<meta charset="utf-8">
	<meta author="Daniel_shi">
</head>
<body>
	<div id="app">
		<div v-if="bShow">我是Div1</div>
		<div v-if="bShow2">我是Div2</div>
		<div v-if="bShow3">我是Div3</div>
	</div>
</body>
</html>

<script src="vue.global.min.js"></script>
<script type="text/javascript">
	var appConfig = {
		data(){
			return{
				bShow : true,
				bShow2 : false,
				bShow3 : true
			}

		}


	};


	Vue.createApp(appConfig).mount("#app");

</script>

在这里插入图片描述

另外我有个问题，我调整了一下return的格式

		data(){
			return         
			{
				bShow : true,
				bShow2 : false,
				bShow3 : true
			}

		}

在这里插入图片描述
感觉有点奇怪，所以，最好括号放在return 后面吧。

最好的方法，下次写直接复制，然后改。基本就是这么个套路，配置，绑定mount。

循环

我更喜欢叫遍历，就是数组，for，每个元素都看一下。

		<ul>
			<li v-for="book in books">{{ book.text }}</li>
		</ul>

		data(){
			return{
				bShow : true,
				bShow2 : false,
				bShow3 : true,

		      books: [
		        { text: '笑傲江湖' },
		        { text: '天龙八部' },
		        { text: '侠客行' }
		      ]
			}

		}

在这里插入图片描述
当然高级用法里面也可以带个索引。
基本就是