Vue 条件渲染 与 列表渲染

目录

一、条件渲染

        1.简介 : 

        2.v-if实例 : 

        3.v-show实例 : 

        4.v-if与v-show的区别 : 

二、列表渲染

        1.基本用法 : 

            1.1 v-for遍历数组 

            1.2 v-for遍历对象 

        2.应用实例 : 

---

一、条件渲染

        1.简介 : 

        (1) Vue提供了v-if 和 v-show条件指令来完成条件渲染/控制。

        v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染，也可以用v-else添加一个"else块"。

        PS : v-else和v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后，否则它们不会被识别。

<h1 v-if="awesome">Vue is awesome!h1>
<h1 v-else>Oh no 😢h1>

        (2) v-show指令是另一个用于根据条件展示元素的选项。eg:

<h1 v-show="ok">Hello!h1>

        不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。注意，v-show 不支持