9.Vue循环与if指令

最新推荐文章于 2023-12-06 20:00:23 发布

西瓜咬人啦

最新推荐文章于 2023-12-06 20:00:23 发布

阅读量291

点赞数 1

分类专栏： Vue 文章标签： vue js

@TMQ

本文链接：https://blog.csdn.net/weixin_42076050/article/details/109184184

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. v-for指令

可以遍历字符串，数组，对象，对象数组等

2. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>循环与if指令</title>
	<script src="./js/vue.js"></script>
</head>
<body>
	 <div id="app">
	    <!-- v-for指令用于循环数据 -->
		<ul>
		   <li v-for="str in arr">
		      <span>{{str}}</span>
		   </li>
		</ul>
		<hr/>
		<ul>
		   <li v-for="str in item">
		      <span>{{str}}</span>
		   </li>
		</ul>
		<hr/>
		<ul>
		   <li v-for="(item,index) in list">
		      <span @click="print(item.name)">{{item.name}}============={{index}}</span>
		   </li>
		</ul>
		<hr/>
		<ul>
		   <li v-for="(v,k,count) in user">
		      <span>{{v}}======{{k}}======{{count}}</span>
		   </li>
		</ul>
		<!-- v-if 用于条件分支-->
		<div v-if="type=='A'">A</div>
		<div v-else-if="type=='B'">B</div>
		<div v-else>not</div>
	</div>
</body>
 <script>
	 new Vue({
			  el:"#app",
			  data:{
				arr:"南京,上海,苏州,镇江,扬州".split(","),
				list:[
				{
				  name:"a1",
				  age:10
				},{
				   name:"a2",
				   age:20
				
				},{
				   name:"a3",
				   age:30
				}
				],
				user:{
				   name:"tom",
				   age:100
				},
				item:"abcde",
				type:"Aa"
			  },
			   methods:{
			      print:function(arg){
				     console.log(arg);
				  }
			   }
		   });
 </script>
</html>