vue(4) vue指令中的v-for，v-if,v-show

最新推荐文章于 2024-07-17 23:14:03 发布

就是三木啊

最新推荐文章于 2024-07-17 23:14:03 发布

阅读量316

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43783419/article/details/100768641

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue指令之`v-for`和`key`属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue包  -->
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 迭代数组 -->
			<!-- <ul>
				<li v-for="(item,i) in list">索引：{{ i }}---姓名：{{ item.name}}---年龄：{{ item.age }}</li>
			</ul> -->
			<!-- 循环对象 -->
			<!-- <p v-for="(val,key) in user">{{val}}---{{key}}</p> -->
			<!-- 迭代数字 -->
			<p v-for="count in 10">这是第{{ count }}次循环</p>
		</div>
		<script type="text/javascript">
			// 创建vue实例,得到viewmodel
			var vm=new Vue({
				el:'#app',
				data:{
					// list:[
					// 	{name:'张三',age:'14'},
					// 	{name:'李四',age:'15'},
					// 	{name:'刘大',age:'18'},
					// 	{name:'王二',age:'20'},
					// ],
					
					// user:{
					// 	id:1,
					// 	name:'张三',
					// 	sex: '男',
					// }
				},
				methods:{}
			})
		</script>
	</body>
</html>

1.迭代数组

<ul>
	<li v-for="(item,i) in list">索引：{{ i }}---姓名：{{ item.name}}---年龄：{{ item.age }}</li>
</ul>

在这里插入图片描述

2.迭代对象

<p v-for="(val,key) in user">{{val}}---{{key}}</p>

在这里插入图片描述
在遍历对象身上的键值对时，除了key、val，在第三个位置，还有索引。

3.迭代数字

<p v-for="count in 10">这是第{{ count }}次循环</p>

在这里插入图片描述

Vue指令之`v-if`和`v-show`

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue包 -->
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="toggle" @click="toggle">
			<p v-if="flag">v-if控制的元素</p>
			<p v-show="flag">v-show控制的元素</p>
			
		</div>
		<script type="text/javascript">
			// 创建vue实例
			var vm = new Vue({
				el:'#app',
				data:{
					flag:true,
				},
				methods:{
					toggle(){
						this.flag =! this.flag;
						
					}
				},
			})
		</script>
	</body>
</html>

在这里插入图片描述
点击后：