vue3条件语句和循环语句
Posted 结构化思维wz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3条件语句和循环语句相关的知识，希望对你有一定的参考价值。
vue3 语法
文章目录
Vue3 条件语句
条件判断
v-if
条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：
v-if 指令
在元素中使用 v-if 指令：
这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 元素上，并在上面使用 v-if。最终的渲染结果将不包含 元素。
v-if 指令
在 元素上使用 v-if 指令：
v-else
可以用 v-else 指令给 v-if 添加一个 “else” 块：
v-else 指令
随机生成一个数字，判断是否大于 0.5，然后输出对应信息：
v-else-if
v-else-if 即 v-if 的 else-if 块，可以链式的使用多次：
v-else 指令
判断 type 变量的值：
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令
Hello!
Vue.js 循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 实例
v-for 还支持一个可选的第二个参数，参数值为当前项的索引：
v-for 实例
index 为列表项的索引值：
模板 中使用 v-for：
v-for
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for
你也可以提供第二个的参数为键名：
v-for
第三个参数为索引：
v-for
v-for 迭代整数
v-for 也可以循环整数
v-for
- {{ n }}
显示过滤/排序后的结果
我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。
v-for 实例
输出数组中的偶数：
- {{ n }}
v-for/v-if 联合使用
以上实例联合使用 v-for/v-if 给 select 设置默认值：
v-for/v-if 实例
v-for 循环出列表，v-if 设置选中值：
以上是关于vue3条件语句和循环语句的主要内容，如果未能解决你的问题，请参考以下文章