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

• v-show

v-if和v-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>

結語

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