for循环的优点_从零单排vue第三课--Vue.js的条件渲染和循环渲染-CSDN博客

v2-64f4e4297d999d7ca027bc4c9d3b1da8_1440w.jpg?source=172ae18b

前情回顾

上一节我们讲解了vue的一些设计思想，记住最重要的两点：双向数据绑定以及组件化思维。现在不太理解没关系，在后面的课程中，我们会慢慢发现这些重要思想的优点。

条件渲染（v-if，v-show）

在vue里，控制切换一个元素是否显示非常简单。

如下代码：

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="utf-8">
 5        <title>Hello World</title>
 6    <script src="vue.js"></script>
 7    </head>
 8    <body>
 9    <div id="app" v-if="show">
10      {{content}}
11    </div>
12      <script>
13        var app = new Vue({
14          el: '#app',
15          data: {
16            content: 'hello world',
17            show: true
18          }
19        })
20      </script>
21    </body>
22</html>

运行结果：

浏览器中正常显示hello world。但是如果在控制台输入 app.show = false，显示内容就会消失。

代码解析：

我们使用了新的vue语法v-if，它的作用是将v-if的值绑定到data属性show中，如果show为true，内容显示。如果show为false，内容消失。这就是所谓的条件渲染。
在vue里还有一个条件渲染的语法v-show，它的用法与v-if差不多，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-if是真正的条件渲染，所有条件内的监听器及子组件都会被销毁，而v-show只是简单的切换元素的css属性。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

循环渲染（v-for）

v-for可以用来循环一个数组。如下代码：

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="utf-8">
 5        <title>v-for的用法</title>
 6    <script src="vue.js"></script>
 7    </head>
 8    <body>
 9    <div id="app">
10      <ul>
11        <li v-for="item in list">
12          姓名：{{item.name}}，年龄：{{item.age}}
13        </li>
14      </ul>
15    </div>
16      <script>
17        var app = new Vue({
18          el: '#app',
19          data: {
20            list: [{name: "Andy", age: 24},
21                   {name: "Dell", age: 28}]
22          }
23        })
24      </script>
25    </body>
26</html>

运行结果：

姓名：Andy，年龄：24
姓名：Dell，年龄：28

代码解析：

第20行在data里添加了一个list数组，包含了两个对象
第10-14行代码里，用ul标签表示一个列表，在li标签里使用v-for指令，循环list数组。
v-for指令的语法：v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for还支持一个可选的第二个参数，表示当前的索引。item in list可以写成（item, index）in list

v-for指令还可以循环一组对象

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="utf-8">
 5        <title>Hello World</title>
 6    <script src="vue.js"></script>
 7    </head>
 8    <body>
 9    <div id="app">
10      <ul>
11        <li v-for="value in object">
12          {{value}}
13        </li>
14      </ul>
15    </div>
16      <script>
17        var app = new Vue({
18          el: '#app',
19          data: {
20            object: {
21              title: 'This is title',
22              anthor: 'Dell Lee',
23              date: '2019-11-27'
24            }
25          }
26        })
27      </script>
28    </body>
29</html>

运行结果：

This is title
Dell Lee
2019-11-27

代码解析：

你也可以提供第二个的参数为 property 名称 (也就是键名)：
1 <li v-for="(value, name) in object">
2 {{name}}:{{value}}
3 </li>

title: This is title
anthor: Dell Lee
date: 2019-11-27

还可以用第三个参数index作为索引，与数组循环一样。

值得注意的问题：

建议尽可能在使用 v-for 时提供 key attribute。这节先不讲解原因，以及v-bind指令的语法，先记住，在真正的项目开发中，使用v-for，都是这样需要提供key attribute。

1      <ul>
2        <li v-for="(item, index) in list" v-bind:key="item.index">
3          姓名：{{item.name}}，年龄：{{item.age}}
4        </li>
5      </ul>