VUE 条件渲染（v-if)与列表渲染（v-for)

目录

条件渲染

与v-show的区别

列表渲染

---

条件渲染

如此使用：

<script setup>

import { computed,reactive } from 'vue';

const poem = reactive({

    title: '古诗合集',

    author: '李商隐',

    poem_LiBai : [

        '我歌月徘徊，我舞影零乱。','且放白鹿青崖间。','两岸猿声啼不住，轻舟已过万重山。'

    ],

    poem_LiShangYin : [

        '昨夜星辰昨夜风，画楼西畔桂堂东。','锦瑟无端五十弦，一弦一柱思华年。','何当共剪西窗烛，却话巴山夜雨时。'

    ]

    })

    //判断作者的名字是否为李白

    const isLiBai = computed(()=>{

        return poem.author==='李白'

    })

</script>

<template>

    <h1>{{ poem.title }} - {{ poem.author }}（组合式）</h1><br>

    <span v-if="isLiBai">{{ poem.poem_LiBai }}</span>

    <span v-else>{{ poem.poem_LiShangYin }}</span>

</template>

上图代码实现的功能为：当作者名字为李白时，显示poem_LiBai的内容，否则显示poem_LiShangYin的内容，运行结果如下：

 注意，一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则会出现下面的情况：

与v-show的区别

 另一个可以用来按条件显示一个元素的指令是 v-show，二者区别如下：

V_show:

 当v-if的条件为假时，它不会渲染这个元素；而v-show无论条件真假都会渲染这个元素，只是当条件为假时，v-show会把这个元素的display的属性切换为none来隐藏元素。

列表渲染

使用v-for进行列表渲染。如此使用：

<script setup>

import { computed,reactive } from 'vue';

const poem = reactive({

    title: '古诗合集',

    author: '李商隐',

    poem_LiShangYin : [

        '昨夜星辰昨夜风，画楼西畔桂堂东。','锦瑟无端五十弦，一弦一柱思华年。','何当共剪西窗烛，却话巴山夜雨时。'

    ]

    })

</script>

<template>

    <h1>{{ poem.title }} - {{ poem.author }}（组合式）</h1><br>

    <li v-for = "item in poem.poem_LiShangYin">

        {{ item }}

    </li>

</template>

以上代码使用v-for对poem.poem_LiShangYin这个数组进行了遍历并将数组项展示在每一个li标签中。

运行结果如下：

 

同时，v-for有一个可选的第二个参数，它表示当前项的位置索引，起始值为0，针对以上的例子，可以这样写：

    <h1>{{ poem.title }} - {{ poem.author }}（组合式）</h1><br>

    <li v-for = "(item, index) in poem.poem_LiShangYin">

        {{ index }} 、 {{ item }}

    </li>

运行结果为：

o(*￣▽￣*)ブ v-for中的in可以用of代替哦。

也可以使用v-for遍历一个对象的所有属性，这时vue提供了第二个参数来表示属性名，而第三个位置表示索引，例如以下代码：

    <li v-for = "(item, key,index) in poem">

        {{ key }} :

        {{ index }} 、 {{ item }}

    </li>

运行结果如下：

v-for还可以接收一个整数，例如：

<li v-for="num in 6"> {{ num }} </li>

结果如下：

注意，此时n的值是从1开始的！！

当v-for和v-if同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 内定义的变量别名：

    <li v-for = "(item, index) in poem.poem_LiShangYin" v-if = "item.length != 0">

        {{ key }} :

        {{ index }} 、 {{ item }}

    </li>

 错误信息：

想要解决这种冲突，只需要把他们放在不同的层级：

    <li v-for = "(item, index) in poem.poem_LiShangYin">

        <span v-if="item.length!=0">

            {{ index }} 、 {{ item }}

        </span>

    </li>