Vue-v-for列表渲染

列表渲染这个东西，在远古时期( 或者说是在没有这种Vue、React等这种便捷工具时期 )，我们的渲染都是手工写出来的。

例如以前的 使用 jq 写 列表页的时候，我们都是先写出静态页面，然后根据返回的数组数据，通过forEach 循环，然后 append 到父节点内部，从而完成展示。

但是这样的缺陷其实很大，因为如果数据很多的话，一旦返回的数组数据中，有某一条数据发生了，会导致所有的数据全部重写渲染一遍，造成了极大的性能开销。

但是在新的 Vue 工具中，为我们提供了简单方便的渲染方法 ：v-for

v-for ：使用方式  列表渲染（数组数据）

v-for：这个名字其实对应的就是 js 内部的 for 循环，只是现在我们使用了 v-for 之后，由 Vue 代替我们执行了 for 循环。

具体执行：在需要循环的标签上 添加 v-for 指令，绑定表达式 item in items 。

表达式释义：item- 数组中的每条数据，items - 需要遍历的具体数据(要么定义在data中，要么定义在文件中，然后引入使用)。

页面展示：现在我们循环了数据，但是页面没有展示出来，想要展示数据，我们就要取到 person 里面的属性和值，但是直接在 标签内部写 person 是无效的。

<ul>
  <li v-for='person in personList'>person</li>
</ul>

// data 内部定义的数据
personList: [
  { id: 1, name: '张三', age: 21 },
  { id: 2, name: '李四', age: 22 },
  { id: 3, name: '王五', age: 23 }
]

 

这是因为，直接写 person 相当于是写的字符串，并没有在 取到当前循环的这条数据，要想取到数据，还需要使用插值语法( {{}} )

<ul>
  <li v-for='person in personList'>{{person}}</li>
</ul>

 

 

 v-for ：数组渲染

类似上面的例子，只是我们将每条数据完整的展示了出来 

<ul>
  <li v-for='person in personList'>{{person.name}} - {{person.age}}</li>
</ul>

<script>
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data() {
      return {
        personList: [
          { id: 1, name: '张三', age: 21 },
          { id: 2, name: '李四', age: 22 },
          { id: 3, name: '王五', age: 23 }
        ]
      }
    },
  })
</script>

 v-for 绑定的表达式还可以添加另外一个参数：index ( index代表的就是当前这条数据的下标 )

<ul>
  <li v-for='(person,index) in personList'>
    {{index}}-{{person.name}}-{{person.age}}
  </li>
</ul>

 

v-for：遍历对象 

 js 能遍历数组，也能遍历对象，那么 Vue 当然需要二者兼容，所以使用 v-for 遍历对象试试看。

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。一共可以接收三个参数，分别是 键值-value、键名-key、索引-index

<ul>
  <li v-for='(value,key,index) of personObj'>
    {{index}}-{{key}}-{{value}}
  </li>
</ul>

<script>
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data() {
      return {
        personObj: {
          name: '张三',
          six: '男',
          age: 18,
        }
      }
    },
  })
</script>

 

 

v-for：除了使用 in 还可以使用 of  

 可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

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

 ps：除了能遍历渲染数组和对象，还能遍历字符串和纯数字，但是用的很少很少就是了