Web前端开发进阶笔记5——分支循环结构、循环结构

1.分支结构：

示例：

<div id='scorecontent'>
			<div>{{score}}</div>
			<input type="number" v-model="score" />
			<div v-if="score>=90">优</div>
			<div v-else-if="score<90&&score>=80">良</div>
			<div v-else-if="score<80&&score>=60">中</div>
			<div v-else>差</div>
			<div v-show="flag">这是v-show</div>
			<button type="button" @click="clickshow">click toggle</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#scorecontent",
				data: {
					score: 10,
					flag: false
				},
				methods: {
					clickshow: function() {
						this.flag = !this.flag
					}
				}
			})
		</script>

这里我们要注意，当我们需要频繁切换显示的时候，我们使用v-show，如果我们有逻辑的显示，并且显示内容固定，我们使用v-if。

2.循环结构：

<div id="content">
			<ul>
				<li v-for="item in fruit">{{item}}</li>
				<li v-for="(a,b) in fruit">{{a+'---'+b}}</li>
				<li v-for="item in fruitName">
					{{'名字：'+item.cname+' ename:'+item.ename+' 单价：'+item.forIn.a+' 个数:'+item.forIn.b+' TP:'+item.forIn.a*item.forIn.b}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#content',
				data: {
					fruit: ['apple', 'banana', 'orange'],
					fruitName: [{
							ename: 'apple',
							cname: '苹果',
							forIn: {
								a: 1,
								b: 2
							}
						},
						{
							ename: 'banana',
							cname: '香蕉',
							forIn: {
								a: 2,
								b: 3
							}
						},
						{
							ename: 'orange',
							cname: '橘子',
							forIn: {
								a: 3,
								b: 4
							}
						}
					]
				}
			})
		</script>

如果我们使用key来写的话可以提高效能：

<li :key='index' v-for="(item,index) in fruitName">
					{{'名字：'+item.cname+' ename:'+item.ename+' 单价：'+item.forIn.a+' 个数:'+item.forIn.b+' TP:'+item.forIn.a*item.forIn.b}}
				</li>

3.v-if和v-for的联合使用：

<!-- 这里我们写一个for和if联合用法，并对对象实现操作,下面有原生JS的回忆 -->
<li v-if="" v-for="(v,k,i) in newobj">{{i+','+k+','+v}}</li>

其中if可以对值进行判定来选择渲染。