【Vue教程四】条件渲染、列表渲染、数组更新

qing_小诺

已于 2022-07-03 15:20:24 修改

阅读量1.8k

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 servlet

于 2019-07-11 15:48:48 首次发布

本文链接：https://blog.csdn.net/qq_33237207/article/details/95217237

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、条件渲染：【v-if】【v-show】

1、v-if 指令用于条件性地渲染一块内容。

1.1、在元素中使用 v-if 指令：

<body>
    <div id="app">
        <h1 v-if="seen">Hello qing!</h1>
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                seen: true,
                type: 'A',
            }
        })
    </script>
</body>

注：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

不推荐同时使用 v-if 和 v-for。因为当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

1.2、在template 中使用 v-if 指令：

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

1.3、用key管理可复用元素：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

说明：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因为两个模板使用了相同的元素，<input> 不会被替换掉，仅仅是替换了它的 placeholder。所以此时要添加 key 属性，来表达“这两个元素是完全独立的，不要复用它们”。

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

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

注意：v-show 不支持 <template> 元素，也不支持 v-else。

3、v-if 与 v-show 比较：

v-if 是“真正”的条件渲染，因为它会根据条件被销毁和重建。而 v-show 始终会被渲染并保留在 DOM 中，它只是简单地切换元素的 CSS 中的 display 属性。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

二、列表渲染【v-for 指令】

1、渲染数组：可以用 v-for 指令基于一个数组来渲染一个列表。

<body>
    <ul id="example-1">
        <li v-for="item in items" :key="item.message">
            {{ item.message }}
        </li>
    </ul>
    <script>
        var example1 = new Vue({
            el: '#example-1',
            data: {
                items: [
                    { message: 'Foo' },
                    { message: 'Bar' }
                ]
            }
        })
    </script>
</body>

v-for 还支持一个可选的第二个参数，即当前项的索引，从0开始。

<li v-for="(item, index) in items" :key="index">
    {{ index }} - {{ item.message }}
</li>

注：使用index做为key值，可能有问题，例如结构中包含输入的dom。

也可以用 of 替代 in 作为分隔符：

<li v-for="item of items"></li>

2、渲染对象：可以用 `v-for` 来遍历一个对象的属性。

<body>
    <ul id="app">
        <!-- 注：第一个参数表示值，第二个的参数为键名，第三个参数为索引 -->
        <li v-for="(value, name, index) in object">
            {{ index }}---{{ name }}==={{ value }}
        </li>
    </ul>
    <script>
        var example1 = new Vue({
            el: '#app',
            data: {
                object: {
                    title: 'hello everyone',
                    author: 'qing',
                    time: '2019-07-11'
                }
            }
        })
    </script>
</body>

结果如下图所示：

三、数组更新

1、变异方法：（通俗来说是指可以直接修改原数组的一些方法）

<body>
    <ul id="app">
        <li v-for="value in items">
            {{ value }}
        </li>
    </ul>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items: ['a', 'b', 'c']
            }
        })
        vm.items.push('d');
    </script>
</body>

此时界面显示“a b c d”

2、非变异方法：例如 filter()、concat() 和 slice()。它们不会改变原始数组，而总是返回一个新数组。

3、注意事项：由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
A、当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
B、当你修改数组的长度时，例如：vm.items.length = newLength

举例：在上面代码中执行下面方法

vm.items[1] = 'x' // 不是响应性的，数组中的第二个元素'b'并不会改变
vm.items.length = 2 // 不是响应性的，数组的长度依然是3

为了解决上述A类问题，可以用下面3种方法：

// vm.items[0] = 'x' // 不是响应性的，此时看数组中的第一个数据没有变化

// 方法1：Vue.set
Vue.set(vm.items, 0, 'x')
//方法2：vm.$set是全局方法Vue.set的别名
vm.$set(vm.items, 0, 'x')
//方法3：使用数组的变异方法 splice方法
vm.items.splice(0, 1, 'x')

为了解决上述B类问题，可以使用splice方法：

vm.items.splice(2);//此时数组长度变成2

qing_小诺

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Vue教程四】条件渲染、列表渲染、数组更新

一、条件渲染：【v-if】【v-show】1、v-if 指令用于条件性地渲染一块内容。1.1、在元素中使用 v-if 指令：<body> <div id="app"> <h1 v-if="seen">Hello qing!</h1> <div v-if="type === 'A'">.........
复制链接

扫一扫