v-if

这里,v-if 指令将根据表达式seen 的值的真假来插入/移除元素。

v-if指令必须将它添加到一个元素上。如果想切换多个元素呢?

示例:添加一个else块此时可以把一个

v-else-fi多分支:

v-show

v-show:另一个用于条件性展示元素的指令,与v-if不同的是,v-show的元素始终会被渲 染并保留再DOM中,所以v-show只是简单地切换元素的display CSS属性。

v-for

可以用v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items 形式 的特殊语法,其中items 是源数据数组,而item 则是被迭代的数组元素的别名。

当Vue 正在更新使用v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数 据项的顺序被改变,Vue 将不会移动DOM 元素来匹配数据项的顺序,而是就地更新每个 元素,并且确保它们在每个索引位置正确渲染。

为了给Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你 需要为每项提供一个唯一的key 属性:

获取用户选择并赋值另一个变量再实时展示: