条件与循环

最新推荐文章于 2024-03-09 11:17:03 发布

蓝白咖啡

最新推荐文章于 2024-03-09 11:17:03 发布

阅读量126

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_43141611/article/details/108218762

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

条件

才发现的！！！这里居然可以写死，直接v-if="true"我们就可以看见元素的值了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>条件与循环</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="true">you can see me now！</h1>
		</div>
	</body>
</html>
<script>
	/* 一定要记得new啊 */
	new Vue({
		/* 通过el绑定元素 #代表id .代表class */
		el: '#app',
		/* 注意这里是冒号而不是括号或别的 */
		data: {
			
		}
	})
</script>

运行效果

在这里插入图片描述

代码二，v-if=“false”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>条件与循环</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="false">you can see me now！</h1>
		</div>
	</body>
</html>
<script>
	/* 一定要记得new啊 */
	new Vue({
		/* 通过el绑定元素 #代表id .代表class */
		el: '#app',
		/* 注意这里是冒号而不是括号或别的 */
		data: {
			
		}
	})
</script>

运行效果

在这里插入图片描述

没有写死是这样的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>条件与循环</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="seen">you can see me now！</h1>
		</div>
	</body>
</html>
<script>
	/* 一定要记得new啊 */
	new Vue({
		/* 通过el绑定元素 #代表id .代表class */
		el: '#app',
		/* 注意这里是冒号而不是括号或别的 */
		data: {
			seen: true
		}
	})
</script>

运行效果：

在这里插入图片描述

false

在这里插入图片描述

还发现一个问题：为0不显示，为1显示。

在这里插入图片描述

循环

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>条件与循环</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ol id="app">
			<li v-for="todo in todos">
			 	{{ todo.text }}
			</li>
		</ol>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		/* el:'#app',这个千万别忘记了 */
		el:'#app',
		data:{
			todos:[
				{text: '学习 JavaScript'},
				{text: '学习 Vue'},
				{text: '整个牛项目'}
			]
		}
	})
</script>