目录
条件渲染
如此使用：
<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>