七. Vue-分支循環結構

分支循環結構

分支結構

• v-if
• v-else
• v-else-if

這三種都是通過判斷指的真和假，判斷指定元素是否渲染到界面

<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>

data:
				{
					score:90
				},
           

• v-show

根據表達式之真假值，切換元素的 display CSS 屬性。 當條件變化時該指令觸發過渡效果。

<div v-show="flag">測試</div>
<button v-on:click="switcher()">show</button>

data:
				{
					score:90,
					flag:false
				},
				methods:
				{
					switcher:function(){
						this.flag=!this.flag;
						// 控制元素是否顯示的開關函數
					}
           

v-if與v-show的差别：

• v-if控制元素是否渲染到界面
• v-show控制元素是否顯示（已經渲染到了界面）

從性能層面來考慮：

如果一個元素渲染出來之後，變動比較少，推薦使用v-if。v-if本質上渲染控制的是dom元素的增加與删除，性能開銷較大

如果元素需要頻繁隐藏，推薦使用v-show

循環結構

• v-for周遊數組

<ul>
		<li v-for="item in fruits">{{item}}</li>
		<!-- 可以友善快速的将數組中元素進行相應填充 -->
</ul>
           

data:
				{
					fruits:['apple','banana','orange','pear'],
				},
           

2.帶索引的數組

<li v-for="(item,index) in fruits">{{item+"----"+index}}</li>
           

<li v-for="item in myfruits">
					<!-- 通過item屬性取出對象的不同值 -->
					<span v-text="item.ename"></span>
					<span v-text="item.cname"></span>
</li>
           

data:
				{
					myfruits:[{
						ename:"apple",
						cname:"蘋果",
					},{
						ename:"orange",
						cname:"橘子",
					}]
				},
           

• key的作用：幫助vue差別不同的元素，進而提高性能

key在處理Dom元素的時候，需要區分出兄弟節點之間彼此不一樣的地方。比較好的辦法就是給每個兄弟節點标注一個唯一辨別（通過key屬性，使key的都應當是唯一的），友善vue處理元素的渲染，提高性能。

為了提高性能，原則上在周遊的時候都應該加上key（不加也可以區分，但是性能偏低）

<li v-band:key="item.id" v-for="(item,index) in fruits">{{item+"----"+index}}</li>
<!-- key的名稱是固定的，item.id可以是任何唯一的值，如item.index也可 -->

myfruits:[{
						id:1,
						ename:"apple",
						cname:"蘋果",
					},{
						id:2,
						ename:"orange",
						cname:"橘子",
					}]
           

• v-for 周遊對象（不推薦周遊數組）

<div v-for='(v,k,i) in obj'>{{v+"--"k+"--"+i}}</div>
//v,k,i分别代表value，key和index，順序不能錯
var obj={
				uname:'hhh',
				age:'21',
				gender:'female',
			}
           

• v-if 和 v-for結合使用

用于實作滿足條件才進行渲染

<div v-if="v==21" v-for='(v,k,i) in obj'>{{v+"--"k+"--"+i}}</div>