Vue的 on +bind+if +for

1.if示例

<div id="app">
    <h1      v-if="message=== 'A' ">A</h1>
    <h1 v-else-if="message=== 'B' ">B</h1>
    <h1 v-else-if="message=== 'C' ">C</h1>
    <h1 v-else>no</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        message: 'B'
    }
});
</script>

for

<div id="app">
    <!--index是vue里面的索引-->
    <li v-for="item,index in items"><!--里面的语法可以这样理解,items in 里面的每一项(items)  -->
        {{item.message}}-{{index}}
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        items: [
            {message : '吃饭'},
            {message : '睡觉'},
            {message : 'host'}
        ]
    }
});
</script>