今天是第十八天，我想簡單分享一下v-if on template & v-for on template

v-if on template:
v-if是一個指令，所以它必須附加在一個單一元素(element)上，那當有多個元素，可以將v-if在template元素上使用，且最終的渲染結果不會包含template元素

v-for on template:
v-for 也可以在template元素上使用，來渲染多個元素的區塊

來寫程式吧

v-if on template

這裡是HTML的部分

<div id="app">
    <ul>
    <template v-if="this.player"> 
    <h1>NBA</h1>
    <p>MJ</p>
    <p>Kobe</p>
    <p>LBJ</p>
    <p>SC</p>
    </template>
    </ul>
</div>

這裡是JS的部分

<script>
    const app = {
    data(){
        return{
            player:true
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

這是執行結果

v-for on template

這裡是HTML的部分

<div id="app">
    <ul>
    <template v-for ="player in players">
    <li>{{player.i}}</li>
    <li class="divider" role="presentation">******</li>
    </template>
    </ul>
</div>

這裡是JS的部分

<script>
    const app = {
    data(){
        return{
            players:[
                {i:'MJ'},
                {i:'Kobe'},
                {i:'LBJ'},
                {i:'SC'},
                ]
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

這是執行結果

HTML都是用官方文件的例子。

參考資料:

v-if on template:
https://vuejs.org/guide/essentials/conditional.html#v-if-on-template

v-for on template:
https://vuejs.org/guide/essentials/list.html

v-if on template & v-for on template就分享到這邊，我們第十九天見