對於每一門語言，流程控制語句都十分的重要，有了它們我們才能實現更加複雜的需求，實現更加強大的功能。在VUE中對應也有一些特有的標籤。下面我們來了解一下~
一、條件判斷標籤：
v-if --對應if 用法 v-if="表達式"
v-else-if --對應else if 用法v-else-if="表達式"
v-else --對應else 用法 v-else
v-show --與v-if作用相同，但不能和else，else if連用。 用法同v-if
下面用代碼來舉例說明：
<template>
<div id="app">
<input v-model="message">
<br>
<!-- if判斷語句 -->
<div v-if="message === 'A'">
{{message}}
</div>
<!-- else if 必須結合if使用 -->
<div v-else-if="message === 'B'">
{{message}}
</div>
<div v-else-if="message === 'C'">
{{message}}
</div>
<!-- else 必須結合if使用 -->
<div v-else>
Not A/B/C
</div>
<!-- v-show 用法和v-if一樣，但不能結合v-else-if和v-else使用 -->
<div v-show="message === 'A'">v-show ---> {{message}}</div>
</div>
</template>
<script>
export default {
data(){
return {
message:"",
}
}
}
</script>
<style lang="scss">
</style>
循環語句用法（v-for）
v-for指令用於循環遍歷某些集合中的數據。用法類似於java中的增強for
用法： v-for=" 當前元素 in 集合變量名"
還可以輸出對應元素的索引值 v-for="(第一個參數是元素值的位置,第二個參數是索引的位置) in 集合變量名"
詳見下面的代碼：
<template>
<div id="app">
<!-- for循環遍歷字符數組 -->
<div v-for="item in list">
{{item}}
</div>
<br>
<!-- for循環遍歷map -->
<div v-for="p in person">
{{p.name}}
</div>
<!-- for 循環輸入數組元素及對應索引，我們後續還可以根據索引來進行條件判斷-->
<div v-for="(value,index) in list">
{{value}} --對應索引--> {{index}}
</div>
</div>
</template>
<script>
export default {
data(){
return {
list:[
'China',
'American',
'England'
],
person:[
{name:'孫悟空'},
{name:'豬八戒'},
{name:'沙僧'}
]
}
}
}
</script>
<style lang="scss">
</style>
以上就是條件判斷語句和循環語句的用法。
喜歡的朋友歡迎點贊，評論，關注哦~~