iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

網頁前端基礎&Vue.js系列 第 30

Vue.js指令(v-if & v-show & v-for)(DAY30)

  • v-if

v-if/v-else/v-else-if 的用法就像是JavaScript的判斷式,使用條件渲染能夠使資料在特定條件下才出現,若為true,則達成條件顯示資料,false則相反。而Vue的方便之處在於它的條件渲染可以直接加在HTML標籤上。下面就直接進入例子來了解如何使用吧!


Example

<div id="app">
       <img src="768px-CC-BY-NC-SA.svg.png" />
       <h2>是否同意以上的cc授權條款</h2>
       <div>
           <input type="checkbox" id="check" v-model="agree" />
           <span style="font-size:x-large">同意</span>
       </div>
       <div style="background-color: aquamarine; font-size: x-large " v-if="agree">已同意</div>
       <!--agree若為true則會顯示上面這行-->
       <div style="background-color: red ; font-size: x-large " v-else>需同意上述cc條款</div>
       <!--agree若為false則會顯示上面這行-->
   </div>
   <script>
       new Vue({
           el: '#app',
           data: {
               agree: true
           }
       })
   </script>

https://ithelp.ithome.com.tw/upload/images/20211011/20140225b0gCzHyZvp.pnghttps://ithelp.ithome.com.tw/upload/images/20211011/20140225jmfagj5tES.png

  • v-show

v-ifv-show的功能大致上是很像的,但有略微的不同,以下介紹:

1.v-if一開始僅會渲染符合條件的HTML元素,v-show則是不管初始條件為何,都會先將元素進行渲染,之後再使用CSS切換,像是使用display:none隱藏不符合條件的資料。
2. v-show較適合使用會經常切換的內容,v-if則相反。
3. v-show不會有else的情況出現,若要使用else,則需使用v-if
4. v-show無法搭配template模板使用,v-if則可以。

  • v-for

在上一篇文章的例子中有使用到v-for,它的用法是可以將陣列中的資料或物件,一個一個的渲染至特定的地方。而v-for指令需要了解一種特殊的語法:message in area2

<div v-for="message in area2">{{ message }}</div>
<!--從area2陣列中取出資料放入自行取名的message變數中-->
<script>
        const App = Vue.createApp({
            data() {
                return {
                    area2: []
                }
            }
        }).mount('#messagebox');
</script>

Example

    <h1>Hello公司商品統計</h1>
    <ul id="example-2">
        <li v-for="(item, index) in items">
            第{{ index }}產品:{{ company }}公司 - {{ item.m }}
        </li>
    </ul>
    <script>
        var example2 = new Vue({
            el: '#example-2',
            data: {
                company: 'Hello',
                items: [
                    { m: '手錶' },
                    { m: '吹風機' },
                    { m: '水壺' },
                    { m: '燈泡' },
                ]
            }
        })
    </script>

https://ithelp.ithome.com.tw/upload/images/20211011/20140225eA4ssDKMFD.png

結語

Vue指令的部分也到這邊告一個段落!30天的最後還沒有把vue介紹完,若有機會再來和大家分享喔!


上一篇
Vue.js指令(v-on)綁定(DAY29)
系列文
網頁前端基礎&Vue.js30

1 則留言

0

恭喜杯蓋!!/images/emoticon/emoticon34.gif

我要留言

立即登入留言