Vue if和for使用

if使用实例1

<div id="app">
       <h1 v-if = "ok">YES</h1>
       <h1 v-else>NO</h1>
</div>

<!--    导入Vue.js-->
<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            ok: true
        }

    });
</script>

if使用实例2

<div id="app">
       <h1 v-if = "type=== 'A'">A</h1>
       <h1 v-else-if="type === 'B'" >B</h1>
       <h1 v-else-if="type === 'C'">C</h1>
       <h1 v-else>D</h1>

</div>

<!--    导入Vue.js-->
<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            type: 'A'
        }

    });
</script>

for使用实例1

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<!--    导入Vue.js-->
<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: "狂神说Java"},
                {message: "狂神前端"},
                {message: "狂神运维"},
            ]
        }

    });
</script>