VueJS学习——条件渲染和列表渲染( 三 )_介绍之前一段时间由于工作很忙

点击按钮后变化

接下来是v-show的示例

v-show的行为与v-if相同。它还根据分配给它的条件显示和隐藏元素。v-if和v-show之间的区别在于v-if如果条件为false则从DOM中删除HTML元素，如果条件为真则将其添加回来。而v-show隐藏了元素，如果条件为false，则display：none。如果条件为真，它会显示元素返回。因此，元素始终存在于dom中。

列表渲染

v-for现在让我们使用v-for指令进行列表渲染

名为items的变量声明为数组。在方法中，有一个名为showinputvalue的方法，它被分配给带有水果名称的输入框。在该方法中，使用以下代码将输入文本框内的水果添加到数组中

showinputvalue : function(event) {

this.items.push(event.target.value);