一、条件渲染：【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

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

vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
【Vue】基础（三）条件渲染 - 列表渲染(key的作用与原理虚拟DOM解析) - 收集表单数据 - 持续更新中
目录 11. 条件渲染 11.1 v-if 11.2 v-show 12. 列表渲染 12.1 v-for(基本列表使用) 12.2 key的作用与原理真实DOM和其解析流程虚拟 DOM 的好处 ...
React条件渲染列表渲染
一.React条件渲染某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容: 在vue中,我们会通过指令来控制:比如v-if.v-show: 在React中,所有的条件判 ...
nextjs系列教程(四)：页面预渲染-SSG
NextJs 页面预渲染方案 1.1 预渲染介绍原因: 浏览器访问网站的流程是首先对React组件做初始化渲染,此是页面并没有展示接口数据,只是对初始的state数据进行渲染.然后通过 useEff ...
Vue源码后记-vFor列表渲染（3）
这一节肯定能完! 经过DOM字符串的AST转化,再通过render变成vnode,最后就剩下patch到页面上了. render函数跑完应该是在这里: function mountComponent( ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
vue学习笔记（二）- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至作者:狐狸家的鱼双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面页面->数据适用:input.select. ...
React（二）：jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
React(二) 一.jsx事件绑定 1.this的绑定方式 2.jsx中绑定this的三种方式 3.事件对象和传参 (1)事件对象怎么传 (2)其他参数怎么传? 二.条件渲染 1.直接if-else ...
react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染一.条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

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

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

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

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

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

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

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

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

三、数组更新

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

最新文章

热门文章

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

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

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

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

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

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

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

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

三、数组更新

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

最新文章

热门文章

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

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