VUE - 基礎語法（條件、迴圈）

阿新 • • 發佈：2020-10-22

v-show指令，判斷元素是否應該顯示：

傳入的值為true，或能被轉換為true，該元素會被顯示。

傳入的值為false，或能被轉換為false，該元素會被隱藏。相當於設定了 display:none;。

<div id="test">
　　<p v-show="one">顯示</p>
　　<p v-show="two">顯示</p>
　　<p v-show="three">隱藏</p>
　　<p v-show="four">隱藏</p>
</div>
<!--解析結果 - START-->
<div>
　　<p>顯示</p>
　　<p>顯示</p>
　　<p style="display:none;">隱藏</p>
　　<p style="display:none;">隱藏</p>
</div>
<!--解析結果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　one : true,
　　　　　　two : 1,
　　　　　　three : false,
　　　　　　four : 0
　　　　}
　　});
</script>

v-if、v-else-if、v-else，判斷元素是否應該載入：

哪一個程式碼塊的判斷條件為true，就載入那一塊，否則不被載入。

注意：v-show的執行結果是元素是否顯示，這三個指令的執行結果是元素是否載入，還是有區別的。

<div id="test">
　　<p v-if="status=='loading'">loading</p>
　　<p v-else-if="status='success'">success</p>
　　<p v-else="status='fail'">fail</p>
</div>
<!--解析結果 - START-->
<div>
　　<p>loading</p>
</div>
<!--解析結果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　status : "loading"
　　　　}
　　});
</script>

v-for指令，可以基於源資料多次渲染元素：

迴圈整數（整數就是迴圈次數 - 從1開始）：

//n in m或者n of m
<ul id="test">
　　<li v-for="n in 2">{{n}}</li>
　　<li v-for="n of 2">{{n}}</li>
　　<li v-for="n in m">{{n}}</li>
　　<li v-for="n of m">{{n}}</li>
</ul>
<!--解析結果 - START-->
<ul>
　　<li>1</li>
　　<li>2</li>
　　<li>1</li>
　　<li>2</li>
　　<li>1</li>
　　<li>2</li>
　　<li>3</li>
　　<li>1</li>
　　<li>2</li>
　　<li>3</li>
</ul>
<!--解析結果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　m : 3
　　　　}
　　});
</script>

迴圈陣列：

//item in arr 或者 item of arr，迴圈輸出資料項
<ul id="test">
　　<li v-for="item in names">{{item}}</li>
　　<li v-for="item of names">{{item}}</li>
</ul>
<!--解析結果 - START-->
<ul>
　　<li>張三</li>
　　<li>李四</li>
　　<li>王五</li>
　　<li>張三</li>
　　<li>李四</li>
　　<li>王五</li>
</ul>
<!--解析結果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　names : ["張三","李四","王五"]
　　　　}
　　});
</script>

//(item,index) in arr 或者 (item,index) of arr，迴圈輸出資料項和索引
<ul id="test">
　　<li v-for="(item,index) in names">第{{item}}個人是：{{item}}</li>
　　<li v-for="(item,index) of names">第{{item}}個人是：{{item}}</li>
</ul>
<!--解析結果 - START-->
<ul>
　　<li>第0個人是：張三</li>
　　<li>第1個人是：李四</li>
　　<li>第2個人是：王五</li>
　　<li>第0個人是：張三</li>
　　<li>第1個人是：李四</li>
　　<li>第2個人是：王五</li>
</ul>
<!--解析結果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　names : ["張三","李四","王五"]
　　　　}
　　});
</script>

迴圈物件：

//value in obj或者value of obj，迴圈物件的值
<div id="test">
　　<p v-for="value in student">{{value}}</p>
　　<p v-for="value of student">{{value}}</p>
</div>
<!--解析結果 - START-->
<ul>
　　<p>傻屌</p>
　　<p>24</p>
　　<p>傻屌</p>
　　<p>24</p>
</ul>
<!--解析結果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　student : {
　　　　　　　　name : "傻屌",
　　　　　　　　age : 24
　　　　　　}
　　　　}
});
</script>

//(value,key) in obj或者(value,key) of obj，迴圈物件的值和屬性
<div id="test">
　　<p v-for="(value,key) in student">屬性：{{key}}，值：{{value}}</p>
　　<p v-for="(value,key) of student">屬性：{{key}}，值：{{value}}</p>
</div>
<!--得到結果 - START-->
<div>
　　<p>屬性：name，值：傻屌</p>
　　<p>屬性：age，值：24</p>
　　<p>屬性：name，值：傻屌</p>
　　<p>屬性：age，值：24</p>
</div>
<!--得到結果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　student : {
　　　　　　　　name : "傻屌",
　　　　　　　　age : 24
　　　　　　}
　　　　}
　　});
</script>

//(value,key,index) in obj或者(value,key,index) of obj，迴圈物件的值、屬性、索引
<div id="test">
　　<p v-for="(value,key,index) in student">第{{index}}個屬性{{key}}的值為{{value}}</p>
　　<p v-for="(value,key,index) of student">第{{index}}個屬性{{key}}的值為{{value}}</p>
</div>
<!--得到結果 - START-->
<div>
　　<p>第0個屬性name的值為傻屌</p>
　　<p>第1個屬性age的值為24</p>
　　<p>第0個屬性name的值為傻屌</p>
　　<p>第1個屬性age的值為24</p>
</div>
<!--得到結果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　student : {
　　　　　　　　name : "傻屌",
　　　　　　　　age : 24
　　　　　　}
　　　　}
　　});
</script>