vue.js--条件语句&循环语句

Vue.js条件与循环

条件判断

v-if指令

条件判断使用v-if指令

在这个例子里,v-if 指令根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

现在你看到我了

注:template标签是一种用于保存客户端内容的机制,该内容在页面加载时不被渲染,但可以在运行时使用JavaScript进行实例化。

v-else指令

可以用v-else 指令给 v-if 添加一个 "else" 块:
例:随机生成一个数字,判断是否大于0.5,然后输出对应信息:

Sorry
Not sorry
v-else-if指令:

用作 v-if 的 else-if 块。可以链式的多次使用:

A
B
C
Not A/B/C

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show指令:

Hello!

循环语句

v-for指令

v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:

  1. {{ site.name }}
v-for迭代对象

v-for 可以通过一个对象的属性来迭代数据:

  • {{ index }}. {{ key }} : {{ value }}
vue.js--条件语句&循环语句_第1张图片
image.png
v-for迭代整数
  • {{ n }}
v-for循环数组
  • {{ n }}

你可能感兴趣的:(vue.js--条件语句&循环语句)