八、渲染指令—v-for

v-for介绍：v-for指令用于遍历数据渲染结构，常用的数组与对象均可遍历。

示例1：渲染数组当中的数据，item是一个自己起的标识，in是固定的关键字，再···里，arr是数组名，那么我们的综合意思就是：item这个标识再arr数组里，然后我们渲染这个item标识就可以拿到数据。

示例2：我们的v-for当中的标识可以指定2个，一个是value值，一个是索引值。

示例3：不仅可以遍历数组，还可以遍历对象，如下示例我们演示遍历对象

示例4：遍历对象有3个标识，分别是值，键，索引。如下示例我们演示多个标识的情况

示例5：遍历数值

示例6：遍历数值也有2个标识，一个是值，一个是索引值

<body><div id="app"><ul><!-- 遍历数组 --><li v-for="item in arr">{{ item }}</li><li v-for="(item,index) in arr">元素的value值为:{{ item }}元素的索引值为: {{ index }}</li><!-- 遍历对象 --><li v-for="value in obj">{{ value }}</li><li v-for="(value,key,index) in obj">元素的值为:{{ value }}元素的键为:{{ key }}元素的索引为:{{ index }}</li></ul><!-- 遍历数值 --><ul><li v-for="(item,index) in 5"> 这是第 {{ item }} 个元素，索引值为 {{ index }}</li></ul></div><script src="js/vue-2.6.14.js"></script><script>new Vue({el: '#app',data: {arr: ['内容1','内容2','内容3'],obj: {content1: '内容1',content2: '内容2',content3: '内容3'}}})</script>
</body>

示例7：使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题。

首先我们通过v-for书写了3个input框。

我们通过数组的方法：数组反转，reverse（）方法，将输入框进行反转。我们的视觉效果好像是实现了这个效果。

通过我们再输入框中输入内容，然后再进行翻转，发现问题啦，如下图所示，我们发现输入框的文本内容确实被反转了，但是我们用户输入的输入框并没有实现反转，还是以前的样子，这是什么原因呢？vue.js它会尽可能地提高执行效率，可能会在当前元素的基础上去修改视图结构，比如输入框1编程输入框3，但这个部分呢，仅仅限于结构的部分，而我们的输入框属于我们用户的操作，不是属于我们的结构部分，所以呢，会导致这种问题的出现，那么如何解决这个问题呢？

解决方案：使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免出现该问题。

示例8：注意：如果我们绑定的key是index索引值的话，还是会出现问题。因为索引值不是唯一的

示例9：我们将绑定的key改成value值，我们就可以解决该问题啦！因为我们的value值是唯一的！

示例10：如果我们的value值不是唯一的，有重复的情况，怎么办呢？比如 arr:[2,3,3] 这种出现2个值为3的情况怎么办呢？我们可以通过数组对象的方式，一个数组当中存储多个对象，每个对象有2个键，一个是id值，一个是value值，我们的:key中去点id，渲染的输入框可以通过点value即可。

<body><div id="app"><ul><li v-for="(value,index) in arrList" :key="value.id">输入框{{ value.value }} : <input type="text"></li></ul></div><script src="js/vue-2.6.14.js"></script><script>var vm = new Vue({el: '#app',data: {arr: [1,2,3],arrList: [{id: 1,value: 2},{id: 2,value: 3},{id: 3,value: 3}]}})</script>
</body>

示例11： • 通过 <template> 标签设置模板占位符，可以将部分元素或内容作为整体进行操作。我们向选择整体元素，又不想再外层嵌套一个div元素，那么我们就可以使用<template>标签代替，它其实可以说是一个伪标签，我们再DOM元素中看不到它，但是你还可以通过这个标签去操作它里面包裹的所有标签内容。

如下图，我们在HTML结构中书写了一个<template>标签，我们打开审查元素，并没有发现多出这样一个DOM元素，而我们再里面又书写了一个<div>标签，发现有该标签，这说明我们template>标签是再浏览器中看不到的，它就是一个模板占位符，

我们通过演示发现，我们没有再外层设置div元素，直接通过<template>标签直接将<span>和<br>标签一起整体进行v-for遍历的~~

示例12：那么我们<template>标签可不可以绑定:key呢？答案：不可以

如下我们演示一下：会报错，说<template>标签无法键入，让我把钥匙放在真实的元素上才可以。例如<div>这种的，能够在浏览器审查元素中看到的元素。

<body><div id="app"><template v-for="item in obj" :key="item"><span>{{ item }}</span><br></template></div><script src="js/vue-2.6.14.js"></script><script>var vm = new Vue({el: '#app',data:{obj: {content1: '内容1',content2: '内容2',content3: '内容3'}}})</script>
</body>

九、渲染指令—v-show

• 用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用。

示例1：直接在v-show指令中书写布尔值

示例2：在data选项中，定义布尔类型的属性值，作为v-show指令的值。

• 注意：<template> 无法使用 v-show 指令。原因是我们的v-show的实现方式是将元素display显示属性为none隐藏，而我们的<template>标签不是一个真实的标签，我们的display属性是给真元素进行隐藏的，而<template>标签不是真实标签，所以不会生效。

<body><div id="app"><p v-show="bool">这个元素会显示</p><p v-show="false">这个元素会隐藏</p><template v-show="false">这个元素会隐藏</template></div><script src="js/vue-2.6.14.js"></script><script>new Vue({el: '#app',data: {bool: true}})</script>
</body>

十、渲染指令—v-if

• 用于根据条件控制元素的创建与移除。该指令不适合进行显示隐藏的切换功能运用，因为它是将dom元素直接移除或者添加，这样影响性能，所以我们如果想要实现切换功能，推荐使用v-show指令实现。

示例1：通过如下示例我们发现我们所有的判断条件都为true的时候，只显示第一个。这说明我们的v-if是通过顺序进行执行的，先去判断v-if是否是true，如果是那么后面的将不再执行，如果为false的时候，那么它会继续向下执行，直到找到为true就停止，如果找不到true，就执行v-else中的内容。

示例2：我们2个v-else-if都是true，那么还是展示的第一个v-else-if，后面的还是不执行。

示例3：我们所有的v-if、v-else-if都为false，就执行v-else的指令

示例4：通过data选项定义bool属性，值为布尔类型的true，然后指令的取值为该data选项中bool属性的属性值。

<body><div id="app"><p v-if="bool">这是第一个p标签</p><p v-else-if="false">这是第二个p标签</p><p v-else-if="false">这是第三个p标签</p><p v-else>这是最后一个p标签</p></div><script src="js/vue-2.6.14.js"></script><script>new Vue({el: '#app',data: {bool: true}})</script>
</body>

示例5：给使用 v-if 的同类型元素绑定不同的key

我们在用户名输入框中输入123数字

然后我们将bool属性值改为false,此时我们发现我们成功切换到了邮箱输入框，但是输入框中的内容还存在，说明vue运用的是第一个输入框，这是vue为了提高性能留下的问题。

如何解决该问题？

通过绑定:key的方式解决问题，通过如下图所示，我们解决了该问题。我们的输入框成功切换，并且我们的输入框的内容也被成功替换啦！

<body><div id="app"><div v-if="type === 'username'" :key="'username'">用户名输入框: <input type="text"></div><div v-else :key="'email'">邮箱输入框: <input type="text"></div></div><script src="js/vue-2.6.14.js"></script><script>var vm = new Vue({el: '#app',data: {bool: true,type: 'username'}})</script>
</body>

示例6：注意：出于性能考虑，应避免将 v-if 与 v-for 应用于同一标签。

我们的v-if指令应该写到父元素中，v-for写在子元素上，我们这样能够提高性能。因为我们在父元素先判断是否为true或者false，再去执行v-for会性能更好，我们的v-if和v-for写在一个标签上，它是按照v-for优先级最高进行先加载的，这样的话如果我们的判断是false,那就白浪费了v-for，这就导致了出现损耗性能的问题。

（10）vue.js 指令（2）相关推荐

（9）vue.js 指令（1）
一.vue.js指令介绍指令的本质就是 HTML 自定义属性,Vue.js 的指令就是以 v- 开头的自定义属性.我们HTML元素非为固有属性和自定义属性,固有属性就是自己元素本身就有的,比如id, ...
Vue.js 指令v-for和v-if和v-show
文章目录 Vue指令之`v-for`和`key`属性代码演示 v-for循环普通数组 v-for循环对象数组 v-for循环对象 v-for迭代数字 v-for循环中key属性的使用 Vue指令之` ...
vue.js指令v-model实现方法
原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...
（11）vue.js 指令（3）
一.事件处理指令v-on • 用于进行元素的事件绑定.示例1: • Vue.js 还为 v-on 指令提供了简写方式.示例2:v-on的简介方式 • 事件程序代码较多时,可以在 methods 中设 ...
作用于HTML元素的Vue.js指令
我在这里学习内置指令 v-model v-if v-show v-else v-for v-bind v-on v-model表单数据模型双向绑定 example: ① 表单文本输入框效果 <i ...
10.Vue.js前端框架：过渡
1.过渡的作用 Vue.js 内置了一套过渡系统,该系统是 Vue.js 为 DOM 动画效果提供的一个特性.在插入.更新或者移除 DOM 时可以触发 CSS 过渡和动画,从而产生过渡效果. 2.单元 ...
Vue.js指令实例
v-if v-else v-show v-if 根据表达式的值的真假条件渲染元素. v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if v-show 根据表达式之真假 ...
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...

（10）vue.js 指令（2）

八、渲染指令—v-for

九、渲染指令—v-show

十、渲染指令—v-if

（10）vue.js 指令（2）相关推荐

最新文章

热门文章