（Vue基础）6.Vue中列表渲染(v-for/set)

Miya Wang

对数组的循环的几个问题

关键词：

v-for对数组/对象的循环比遍历
key的唯一取值（提升性能）
占位符使用（template模板占位符）
改变数组内容（数组遍历方法、对数组引用的改变、set方法）
改变对象内容（对属性值的直接操作、对对象引用的改变、set方法）

一、v-for —— 列表渲染语法（涉及循环列表数组、对象）

最基本的列表渲染写法：

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Vue中的列表渲染</title>
  <script src="./vue.js"></script>
</head>
 <div id="app">
  <div v-for="(item, index) in list"> //最基本的列表渲染
     {{item}}---{{index}} //最基本的列表渲染
 <script>
   var vm = new Vue ({
     el: "#app",
     data: {
       list: [
	"miya wang",
	 "nice",
	 "to",
	 "meet",
	 "you"
  </script>
 </body>
</html>

二、 :key="xxx" —— 数组循环唯一的key值如何使用？

涉及： 遍历循环、提升性能
遍历循环，涉及多次循环或一次完成的问题。 提升循环显示的性能 ，可以为循环项加上 唯一的key值，提高性能

<body>
  <div id="app">
    <div v-for="(item, index) in list" 
	 :key="item.id">
         {{item.text}}---{{index}}
  <script>
    var vm = new Vue ({
     el: "#app",
     data: {
      list: [
      id: 010110210,
      text:"hello"
      id: 010110211,
      text:"world"
      id: 010110212,
      text:"miya"
  </script>
</body>

后端数据： 返数据时，返回以下参数对象：
（1）id：与数据库相关的唯一的数据条目的标识符（或数据库随机的字段，字段值是唯一的标识）（2）text(内容)：数据的具体内容
item.id(循环的每一项+它唯一的id号码)： 既是唯一的，同时又不是index这个索引下标，保证的 key使用的唯一性 ，保证了 性能上的最优

三、v-for——对数组的循环遍历

实现需求： 改变数组内容，能够让页面变化
1、第一种： 使用数组遍历的方法动态增改变内容 ，数据发生变化，页面跟着变化。
❌：假设，如果直接修改数组下标的话，数据会改变，但页面并不会跟着改变。

✔️：使用 数组遍历方法：
push（往数组里增加一条）
pop（数组最后一项删除掉）
shift（数组的第一项删除掉）
unshift（往数组的开头添加一个或更多元素）
splice（在数据里做一些截取）
sort（对数组做一些排序）
reverse（对数组的取反）

举例 splice方法 ： vm.list.splice(下标，数量，该项的具体详情)

2、第二种： 改变数据的引用地址 ，实现数据变化，页面跟着变化

3、Vue实例中，数组上，set方法怎么使用？
（1）Vue中全局方法： Vue.set(对象，定位下标，要改变的具体值)
（2）Vue中实例方法： vm.$set(对象，定位下标，要改变的具体值)

四、template —— 占位符使用

template 模板占位符 在做多元素标签循环时，用来包裹一些元素做一个占位使用，但循环时并不会真正地渲染到页面上。如：

<div id="app">
  <template v-for="(item, index) in list" 
            :key="item.id"
    {{item.text}}---{{index}}
    {{item.text}}
   </span>
  </template>
</div>

五、v-for —— 对对象的循环遍历

<body>
  <div id="app">
   <!-- 一些可传递的值 -->
    <div v-for="(item, key, index) of userInfo"> 
      {{item}} --- {{key}} --- {{index}}
  <script>
   var vm = new Vue ({
     el: "#app",
     data: {
      userInfo: { //常见的对象数据结构
	name: "miya wang",
	age: "23",
	gender: "female",

一、v-for —— 列表 渲染语法（涉及循环列表数组、对象）

二、 :key="xxx" —— 数组循环 唯一的key值 如何使用？

三、v-for——对数组的循环遍历

四、template —— 占位符使用

五、v-for —— 对对象的循环遍历

一、v-for —— 列表渲染语法（涉及循环列表数组、对象）

二、 :key="xxx" —— 数组循环唯一的key值如何使用？