Vue 条件渲染与列表渲染

news2025/2/23 22:29:29

一、条件渲染

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 不支持 <template> 元素，也不支持 v-else。

2.v-if实例 :

以“勾选复选框引起展示内容的变化”为例，vue_if.html代码如下 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if demonstration</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!--
            对checkbox类型的input标签使用v-model数据双向渲染，
            当checkbox被勾选时，point属性的值为true.
        -->
        <input type="checkbox" v-model="point"/> 你是不是OP?
        <!--
            v-if会自动去挂载的Vue实例中的data数据池中寻找对应的属性。
        -->
        <h2 v-if="point">👴就是OP怎么啦，怎么啦，op怎么你啦?</h2>
        <h2 v-else>我才不是OP呢!</h2>

    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el:"#app",
            data:{
                point:false,
            }
        })
    </script>
</body>
</html>

运行效果 : (如下GIF图)

3.v-show实例 :

仍然以“勾选复选框引起展示内容的变化”为例，vue_show.html代码如下 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-show demonstration</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
  <input type="checkbox" v-model="agreement"/> 你喜不喜欢吃好吃的?
  <h2 v-show="agreement">海星</h2>
  <!--
      v-show不支持v-else
  -->
  <h2 v-show="!agreement">喜欢不了一点</h2>

</div>
<script type="text/javascript">
  let vm = new Vue({
    el:"#app",
    data:{
      agreement:false,
    }
  })
</script>
</body>
</html>

运行效果 : (如下GIF图)

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

(1) v-if会确保在切换过程中，条件块内的事件监听器和子组件真正地销毁和重建；而v-show机制相对简单，无论初始条件如何，条件块总是会被渲染并保留在DOM中，但只是对CSS样式的切换。
(2) 由于v-if会真正的销毁和重建组件，因此v-if开销更大。若组件需要频繁地切换，建议使用v-show；若运行时条件很少改变，可以考虑使用v-if条件渲染.

测试v-if条件渲染，在调试界面输出vm对象(创建的Vue实例)，可以在挂载到的元素的childNodes属性中，找到有且仅有一个h2标签。如下图所示 :

测试v-show条件渲染，在调试界面输出vm对象(创建的Vue实例)，可以在挂载到的元素的childNodes属性中，找到有两个h2标签。如下图所示 :

二、列表渲染

1.基本用法 :

1.1 v-for遍历数组

可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组(位于data数据池中)，而 item 则是被迭代的数组元素的别名。（数组及数组元素的名称可以手动定义）
<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

1.2 v-for遍历对象

也可以用 v-for 来遍历一个对象的 property（对象中定义的属性）；格式为——v-for="value in object"，该用法只可以取出property的值value。
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
若想同时遍历property的键名，需要提供第二个参数作为property的键名，如下 :
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>
还可以用第三个参数作为索引（注意v-for格式中小括号的使用），如下 :
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

2.应用实例 :

vue_for.html代码如下 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for demonstration</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>(1) 渲染一个简单的无序列表(不是来自data数据池)</h3>
        <ul>
            <!-- 名称可以自主定义 -->
            <li v-for="(i,index) in 3">第{{index}}个元素---{{i}}</li>
        </ul>

        <h3>(2) v-for迭代数组</h3>
        <ul>
            <li v-for="stu in students">
                {{stu}}
            </li>
        </ul>

        <h3>(3) v-for迭代对象</h3>
        <ul>
            <li v-for="(value,name,index) in blogger">
                {{index}} -- {{name}} -- {{value}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                students: [
                    {id: 1, name: "Cyan", score: 450},
                    {id: 2, name: "Eisen", score: 446},
                    {id: 3, name: "Five", score: 439}
                ],
                blogger: {
                    name: "Cyan",
                    symbol: "RA9",
                    age: 21
                }
            }
        })
    </script>
</body>
</html>

运行结果 :