3.7 分支循环结构

最新推荐文章于 2024-08-01 15:03:43 发布

泡老师大迷弟

最新推荐文章于 2024-08-01 15:03:43 发布

阅读量92

点赞数

分类专栏： Vue学习文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/PengK_aha/article/details/128066930

版权

Vue学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、分支结构

       v-if
       v-else
       v-else-if
       v-show 的原理,控制元素样式是否显示, display:none

1.v-if 与 v-show的区别

v-if 控制元素是否渲染到页面
v-show 控制原始是否显示(已经渲染到页面)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-if="score >= 90">优秀</div>
			<div v-else-if="score >= 80 && score < 90">良好</div>
			<div v-else-if="score >= 60 && score < 80">一般</div>
			<div v-else>比较差</div>
			<div v-show="flag">测试v-show</div>
			<button v-on:click="handle">点击</button>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	1.分支结构
		v-if
		v-else
		v-else-if
		v-show 的原理,控制元素样式是否显示, display:none
			
	2.v-if 与 v-show的区别
		v-if 控制元素是否渲染到页面
		v-show 控制原始是否显示(已经渲染到页面)
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 score: 59,
				 flag: false,
			},
			methods: {
				handle: function () {
					this.flag = !this.flag;
				}
			}
		});
	</script>
</html>

二、循环结构

v-for

       <li v-for="item in fruits">{{item}}</li>
       增加索引
       <li v-for="(item, index ) in fruits">{{item + '----' + index}}</li>

key的作用:

帮助Vue区分不同的元素,从而提高性能
<li :key='item.id' v-for="(item, index) in myFruits">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>水果列表</div>
			<ul>
				<li v-for="item in fruits">{{item}}</li>
				<!-- 增加索引 -->
				<li v-for="(item, index ) in fruits">{{item + '----' + index}}</li>
				
				<!-- 数组是对象 -->
				<li v-for="item in myFruits">
					<span>{{item.ename}}</span>
					<span>---</span>
					<span>{{item.cname}}</span>
				</li>
				
				<!-- 增加id,key -->
				<li :key='item.id' v-for="(item, index) in myFruits">
					<span>{{item.ename}}</span>
					<span>---</span>
					<span>{{item.cname}}</span>
					<span>---</span>
					<span>{{index}}</span>
				</li>
			</ul>
			
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	1.循环结构
		v-for
		<li v-for="item in fruits">{{item}}</li>
		增加索引
		<li v-for="(item, index ) in fruits">{{item + '----' + index}}</li>
		
		key的作用: 帮助Vue区分不同的元素,从而提高性能
		<li :key='item.id' v-for="(item, index) in myFruits">
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				fruits: ['apple', 'orange', 'banana'],
				myFruits: [{
					id: 1,
					ename: 'apple',
					cname: '苹果'
				},{
					id: 2,
					ename: 'orange',
					cname: '橘子'
				},{
					id: 3,
					ename: 'banana',
					cname: '香蕉'
				}]
			},
			methods: {
				handle: function () {
					this.flag = !this.flag;
				}
			}
		});
	</script>
</html>

三、v-if和v-for 结合使用

   v-for遍历对象
   <div v-for="(value,key,index) in obj"></div>
   v-if和v-for 结合使用
   <div v-if='value==13' v-for="(value,key,index) in obj"></div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-if='value==13'
			v-for="(value,key,index) in obj">
			{{value + '--' + key + '--' + index }}
			</div>
			
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	//使用原生js遍历对象
	var obj = {
		uname: 'jack',
		age: 18,
		gender: 'male'
	}
	for(var key in obj){
		console.log(key, obj[key])
	}
	/*
	1.循环结构
	 v-for遍历对象
	 <div v-for="(value,key,index) in obj"></div>
	 v-if和v-for 结合使用
	 
	 <div v-if='value==13' v-for="(value,key,index) in obj"></div>

	 */
		var vm = new Vue({
			el:'#app',
			data:{
			
				obj: {
					uname: 'jack',
					age: 18,
					gender: 'male'
				}
			},
			methods: {
				handle: function () {
					this.flag = !this.flag;
				}
			}
		});
	</script>
</html>