<———
在這之前，你肯定會注意到上面箭頭所指的位置，那麼你一定會看見，文章外面的大拇指圖示，動動你的手指，就能點一下它，表示你很喜歡這篇文章。

如果你不願意多花時間去自學vue.js 官網的API，那麼你可以在跟著下面的例子學習最實用、最容易上手的案例。

如果你還不會使用最基本的vue.js的話，推薦你先去看一下“1、2.學習使用vue.js（適合初學者）”然後再來學習以下內容：

正題：

條件與迴圈

v-if

<div id="app">
    <div v-if="msg">Hello Vue</div>
</div>
 

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:true //這裡為false 時 div便沒有了，可以去審查一下元素，發現div真的‘變沒了’
            }
        }
    })
</script>   

第二個案例：

<div id="app">
    <h1 v-if="msg>10">我大於10</h1>
    <h1 v-else-if
 
="msg<10">我小於10</h1>
</div>

data(){
    return {
        msg:11
    }
}

v-if如果條件不成立，那麼vue不會把你的標籤渲染到頁面上。

v-show

<div id="app">
    <h1 v-show="msg>10">我大於10</h1>
</div>

data(){
    return {
        msg:9
    }
}

v-show如果條件不成立，那麼vue會自動的在你的元素標籤上加一個display:none;

v-for 指令可以繫結陣列的資料來渲染一個專案列表（通俗的說就是迴圈陣列）

<div id="app">
    <ul>
        <li v-for="data in this.msg">//這裡可以寫this.msg 也可以直接寫msg,我習慣寫this.msg
            <h1>名字：{{data.name}}</h1>
        </li>
    </ul>
</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:[
                    {name:'蘋果'},
                    {name:'香蕉'},
                    {name:'桃子'}
                ]
            }
        }
    })
</script>

當然你也可以直接迴圈繫結src，你只需要把圖片的路徑寫到msg裡面，然後

<img :src="data.src">

其他的繫結小夥伴們可以自己試試哈

文章持續跟新中。。。
請持續關注。。。。
如果你想學習的話，請關注我的文章“學習使用vue.js”系列
讓我們共同進步~