• 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介绍完，若有机会再来和大家分享喔!