3.1 條件判斷
- 在視圖中，經常需要控制某些DOM元素的顯示或隱藏，Vue.js提供了多個指令來實作條件的判斷，包括 v-if、v-else、v-else-if、v-show指令，下面分別進行介紹，
3.1.1 v-if指令
- v-if 指令可以根據運算式的值來判斷是否輸出DOM元素及其包含的子元素，如果運算式的值為 true，就輸出DOM元素及其包含的子元素；否則，就將DOM元素及其包含的子元素移除，例如，輸出資料物件中的屬性 a 和 b 的值，并根據比較兩個屬性的值，判斷是否輸出比較結果，代碼如下：
<div id="box">
<p>a的值是{{a}}</p>
<p>b的值是{{b}}</p>
<p v-if="a<b">a小于b</p>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
a :100,
b :200
}
});
</script>
- 運行結果如下圖所示，
3.1.2 在 template 元素中使用 v-if
- v-if 是一個指令，必須將它添加到一個元素上，根據運算式的結果判斷是否輸出該元素，如果需要對一組元素進行判斷，需要使用 template 元素作為包裝元素，并在該元素上使用 v-if ，最后的渲染結果中不會包含 template 元素，例如，根據運算式的結果判斷是否輸出一組單選按鈕，代碼如下：
<div id="box">
<template v-if="show">
<input type="radio" value="A">A
<input type="radio" value="B">B
<input type="radio" value="C">C
<input type="radio" value="D">D
</template>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
show : true
}
});
</script>
- 運行結果如下圖所示，如果資料物件中的 show 為 true，顯示 div 模塊下的結果，否則沒有輸出結果，
3.1.3 v-else指令
- v-else 指令的作用相當于 JavaScript 中的 else 陳述句部分，可以將 v-else 指令配合 v-if 指令一起使用，例如，輸出資料物件中的屬性 a 和 b 的值，并根據比較兩個屬性的值，輸出比較結果，代碼如下：
<div id="box">
<p>a的值是{{a}}</p>
<p>b的值是{{b}}</p>
<p v-if="a<b">a小于b</p>
<p v-else>a大于b</p>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
a :100,
b :200
}
});
</script>
- 運行結果如下圖所示，
3.1.4 v-else-if 指令
- v-else-if 指令的作用相當于 JavaScript 中的 else if 陳述句的部分，應用該指令可以進行更多的條件判斷，不同的條件對應不同的輸出結果，例如，將某學校的學生成績轉換為不同等級，示例代碼如下：
<div id="box">
<div v-if="score>=90 && score<=100">優秀</div>
<div v-else-if="score>=80 && score<90">良好</div>
<div v-else-if="score>=70 && score<80">中等</div>
<div v-else-if="score>=60 && score<70">及格</div>
<div v-else>不及格</div>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
score : 90
}
});
</script>
- 注意：v-else 指令必須緊跟在 v-if 或 v-else-if 指令的后面，否則 v-else 將不起作用，同樣，v-else-if 指令也必須緊跟在 v-if 指令或 v-else-if 指令的后面，代碼運行圖片如下所示，
3.1.5 v-show 指令
- v-show 指令是根據表達式的值來判斷是否顯示或隱藏DOM元素，當運算式的值為 true 時，元素將被顯示，當運算式的值為 false 時,元素將被隱藏，此時為元素添加了一個行內樣式 style=“display:one”，與 v-if 指令不同，使用 v-show 指令的元素，無論運算式的值為 true 還是 false，該元素都始侄訓被渲染并保留在 DOM 中，系結值的改變只是簡單地切換元素的CSS屬性 display，v-show 指令不支持 template 元素，也不支持 v-else指令，例如，通過單擊按鈕切換圖片的顯示和隱藏，代碼示例如下：
<div id="box">
<input type="button" : value="bText" v-on:click="toggle">
<div v-show="show">
<img src="face.png">
</div>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
bText : '隱藏圖片',
show : true
},
methods: {
toggle : function(){
//切換按鈕文字
this.bText == '隱藏圖片' ? this.bText ='顯示圖片' : this.bText = '隱藏圖片';
this.show = !this.show;//修改屬性值
}
}
});
</script>
3.1.6 v-if 和 v-show 的比較
- v-if 和 v-show 實作的功能類似，但兩者也有著本質的區別，下面列出 v-if 和 v-show 這連個指令的主要不同點，
（1）在進行 v-if 切換時，因為 v-if 中的模板可能包括資料系結或子組件，所以 Vue.js會有一個區域編譯/卸載的程序，而在進行 v-show切換時，僅發生了樣式的變化，因此從切換的角度考慮，v-show 消耗的性能要比 v-if 小，
（2）v-if 是惰性的，如果在初始條件為 false 時，v-if 本身什么都不會做，而使用 v-show 時，不過初始條件是真是假，DOM 元素總是會被渲染，因此從初始渲染的角度考慮，v-if 消耗的性能要比 v-show小， - 總的來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗，因此，如果需要頻繁地切換，則使用 v-show 比較好；如果在運行時條件很少改變，則使用 v-if 比較好，
3.2 串列渲染
- Vue.js 提供了串列渲染的功能，即將陣列或物件中的資料回圈渲染到 DOM 中，在 Vue.js 中，串列渲染使用的是 v-for 指令，其效果類似于 JavaScript 中的遍歷，
3.2.1 應用 v-for 指令遍歷陣列
- v-for 指令將根據接收陣列中的資料重復渲染 DOM 元素，該指令需要使用 item in items 形式的語法，其中，items 為資料物件中的陣列名稱，item 為陣列元素的別名，通過別名可以獲取當前陣列遍歷的每個元素，例如，應用 v-for 指令輸出陣列中存盤的電視劇名稱，代碼如下：
<div id="box">
<ul>
<li v-for="item in items">{{item.TV_play}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
items : [ //定義電視劇名稱
{ TV_play :'琉璃美人煞'},
{ TV_play :'祝卿好'},
{ TV_play :'夢醒長安'}
]
}
});
</script>
- 運行結果如下圖所示，
- 在應用 v-for 指令遍歷陣列時，還可以指定一個引數作為當前陣列元素的索引，語法格式為：(item,index) in items，其中，items 為陣列名稱，item 為陣列元素的別名，index 為陣列元素的索引，例如，應用 v-for 指令輸出陣列中存盤的電視劇名稱和相應的索引，代碼如下：
<div id="box">
<ul>
<li v-for="(item,index) in items">{{index}}-{{item.TV_play}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
items : [ //定義電視劇名稱
{ TV_play :'琉璃美人煞'},
{ TV_play :'祝卿好'},
{ TV_play :'夢醒長安'}
]
}
});
</script>
- 運行結果如下圖所示，
3.2.2 在 template 元素中使用 v-for
- 與 v-if 指令類似，如果需要對一組元素進行回圈，可以使用 template 元素作為包裝元素，并在該元素上使用 v-for，例如，在 template 元素中使用 v-for 指令，實作輸出網站導航選單的功能，代碼如下：
<div id="box">
<ul>
<template v-for="menu in menulist">
<li class="item">{{menu}}</li>
<li class="separator"></li>
</template>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
menulist : ['首頁','閃購']//定義導航選單組件
}
});
</script>
- 某些頁面樣式資源沒有匯入，樣式的格式有點小問題，不過代碼是正確的，主要以展示為主，上述代碼運行結果圖為：
3.2.3 陣列更新檢測
- Vue.js中包含了一些檢測陣列變化的變異方法，呼叫這些方法可以改變原始陣列，并出發視圖更新，下面簡單的介紹一下這些編譯方法，
（1）push()：向陣列的末尾添加一個或多個元素，
（2）pop()：將陣列中的最后一個元素從陣列中洗掉，
（3）shift()：將陣列中的第一個元素從陣列中洗掉，
（4）unshift()：向陣列的開頭添加一個或多個元素，
（5）splice()：添加或洗掉陣列中的元素，
（6）sort()：對陣列中的元素進行排序，
（7）reverse()：顛倒陣列中元素的順序， - 例如應用變異方法push()向陣列中添加一個元素,代碼如下：
<div id="box">
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
items :[ //定義人物名稱
{ name : '張三'},
{ name : '李四'},
{ name : '王二'}
]
}
});
demo.items.push({ name : '麻子'});//向陣列末尾添加陣列元素
</script>
- 運行結果如下圖所示，
- 除了變異方法外，Vue.js 還包含了幾個非變異方法，例如：filter()、concat() 和 slice() 方法，呼叫非變異方法不會改變原始陣列，而是回傳一個新的陣列，當使用非變異方法時，可以用新的陣列替換原來的陣列，例如，應用 slice() 方法獲取陣列中第 2 個元素后的所有元素，代碼如下：
<div id="box">
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
items :[ //定義人物名稱
{ name : '張三'},
{ name : '李四'},
{ name : '王二'}
]
}
});
demo.items =demo.items.slice(1);//獲取陣列中第2個元素后的所有元素
</script>
- 運行結果如下圖所示，
3.2.4 應用 v-for 指令遍歷物件
- 應用 v-for 指令除了可以遍歷陣列之外，還可以遍歷物件，遍歷物件使用 value in object 形式的語法，其中，object 為物件名稱，value為物件屬性值的別名，例如，應用 v-for 指令輸出物件中存盤的人物資訊，代碼如下：
<div id="box">
<ul>
<li v-for="value in object">{{value}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
object :{ //定義人物資訊物件
name : '曉茗',
sex : '女',
age : 29,
address : '上海'
}
}
});
</script>
- 運行結果如下圖所示，
- 在應用 v-for 指令遍歷物件時，還可以使用第 2 個引數為物件屬性名（鍵名）提供一個別名，語法格式為：(value,key) in object ，其中，object 為物件名稱，value 為物件屬性值的別名，key 為物件屬性名的別名，例如，應用 v-for 指令輸出物件中的屬性名和屬性值，代碼如下：
<div id="box">
<ul>
<li v-for="(value,key) in object">{{key}}:{{value}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
object :{ //定義人物資訊物件
name : '曉茗',
sex : '女',
age : 29,
address : '上海'
}
}
});
</script>
- 運行結果圖片如下所示，
3.2.5 向物件中添加屬性
- 在已經創建的實體物件中，
使用全域方法 Vue.set(object,key,value)，
或者實體方法 vm.$set(object,key,value)，可以向物件中添加回應式屬性，同時觸發視圖更新，例如，應用全域方法 Vue.set() 向物件中添加一個新的屬性，代碼如下：
<div id="box">
<ul>
<li v-for="(value,key) in object">{{key}}:{{value}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
object :{ //定義人物資訊物件
name : '曉茗',
sex : '女',
age : 29,
address : '上海'
}
}
});
Vue.set(demo.object,'postion','演員');//利用全域方法向物件中添加屬性
</script>
- 運行結果如下圖所示，
- 如果需要向物件中添加多個回應式屬性，可以使用 Object.assign() 方法，在使用該方法時，需要將源物件的屬性和新添加的屬性合并為一個新的物件，例如，使用 Object.assign() 方法向物件中添加兩個新的屬性，代碼如下：
<div id="box">
<ul>
<li v-for="(value,key) in object">{{key}}:{{value}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
object :{ //定義人物資訊物件
name : '曉茗',
sex : '女',
age : 29,
address : '上海'
}
}
});
demo.object =Object.assign({},demo.object,{ //向物件中添加兩個新的屬性
tel : '18803830913',
interest : '喝奶茶',
});
</script>
- 運行結果如下圖所示，
3.2.6 應用 v-for 指令遍歷整數
- v-for 指令也可以遍歷整數，接收的整數即為回圈次數，根據回圈次數將模板重復整數次，例如，某單位正式員工的作業每增加一年，工資增長30，輸出一個作業5年的員工每一年的工齡工資增加情況，代碼如下：
<div id="example">
<div v-for="n in 5">員工第{{n}}年工齡,工資為：{{n*salary}}萬元</div>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#example',
data :{
salary : 10
}
})
</script>
- 運行結果如下圖所示，
- 使用 v-for 指令輸出九九乘法表，代碼如下：
<div id="demo">
<div v-for="n in 9">
<span v-for="m in n">
{{m}}*{{n}}={{m*n}}
</span>
</div>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#demo'
});
</script>
- 運行結果圖片如下，
備注：后期繼續跟進Vue.js前端框架：計算屬性與監聽屬性，希望大家多多支持和關注，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275806.html
標籤：其他
下一篇：HTML5基礎 下