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>