vue3 條件和列表渲染

 一、條件渲染

1. v-if

通過表達式的真假來控制此標簽是否顯示

    <div id="vm">
        <!--awesome為真時顯示此句-->
        <h1 v-if="awesome">Vue is awesome!</h1>
        <!--awesome為假時顯示此句-->
        <h1 v-else>Oh no 😢</h1>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    awesome:false
                }
            },
        }).mount('#vm')
    </script>

2.v-if使用在模板上

    <div id="vm">
        <template v-if="ok">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
          </template>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    ok:true
                }
            },
        }).mount('#vm')
    </script>

3.v-else-if

 <div id="vm">
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    type:'D'
                }
            },
        }).mount('#vm')
    </script>

4.v-show

    <div id="vm">
        <h1 v-show="ok">Hello!</h1>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    ok:true
                }
            },
        }).mount('#vm')
    </script>

和v-if一樣的效果，但v-show 只是簡單地切換元素的 CSS 屬性display.

 v-show不支持模板

 

 二、列表渲染

 1.v-for

   <div id="vm">
        <ul>
            <li v-for="item in items">
                {{ item.message }}
            </li>
        </ul>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    items: [
                    { message: 'Tom' },
                    { message: 'Jan' }
                ]
                }
            },
        }).mount('#vm')
    </script>

直接使用整數

    <div id="vm">
        <ul>
            <li v-for="n in 10">{{ n }}</li>
        </ul>
    </div>
    <script>
        const v = Vue.createApp({
        }).mount('#vm')
    </script>

2.可選參數

v-for 的第二個參數為可選參數，當前表示索引

    <div id="vm">
        <ul>
            <li v-for="(item,index) in items">
                {{ item.message}},{{index}}
            </li>
        </ul>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    items: [
                    { message: 'Tom' },
                    { message: 'Jan' }
                ]
                }
            }
        }).mount('#vm')
    </script>

 3.使用對象

其中第二個參數表示索引名稱

    <div id="vm">
        <ul>
            <li v-for="(item,index) in Student">
                {{ item}},{{index}}
            </li>
        </ul>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    Student: {
                        Name: 'Tom',
                        age: 20
                    }
                }
            }
        }).mount('#vm')
    </script>

 第三個參數表示索引數字

        <ul>
            <li v-for="(item,index1,index2) in Student">
                {{ item}},{{index1}},{{index2}}
            </li>
        </ul>