列表渲染

利用v-for指令，基于数据多次渲染元素。

在v-for中使用数组

用法：(item, index) in items
参数：
items: 源数据数组

item：数组元素别名

index：可选，索引 可以访问所有父作用域的属性

<ul id="app">
  <li v-for="(person, index) in persons">
    {{ index }}---{{ person.name }}---{{ person.age }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    persons: [
      { name: '杉杉', age: 18 },
      { name: '思思', age: 20 },
      { name: '哥哥', age: 22 },
      { name: '小明', age: 88 },
    ]
  }
})

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

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

在v-for中使用对象

用法：(value, key, index) in Object 参数：value: 对象值            key：可选，键名            index：可选，索引

<ul id="app">
  <li v-for="(value, key, index) in shan">
    {{ value }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    shan: {
      name: '杉',
      age: 18,
      height: '163cm'
    }
  }
})

在v-for中使用数字

用法：n in num 参数：n: 数字，从1开始

<div>
  <span v-for="n in num">{{ n }} </span>
</div>

const vm = new Vue({
  el: '#app',
  data: {
    num: 10
  }
})

在v-for中使用字符串

用法：str in string 参数：str: 字符串，源数据字符串中的每一个

<div>
  <span v-for="str in string">{{ str }} </span>
</div>

const vm = new Vue({
  el: '#app',
  data: {
    string: 'shanshan'
  }
})

循环一段包含多个元素的内容

可以利用template元素循环渲染一段包含多个元素的内容

<ul id="app">
  <template v-for="person in persons">
    <li>{{ item.msg }}</li>
    <li>哈哈</li>
  </template>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    persons: ['a', 'b', 'c', 'd']
  }
})

关于key

Vue更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素：

<ul id="app">
  <li v-for="(person, index) in persons">
    {{ person }}
    <input type="text" />
    <button @click="handleClick(index)">下移</button>
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    persons: ['a', 'b', 'c', 'd']
  },
  methods: {
    handleClick (index) {
      const deleteItem = this.persons.splice(index, 1);
      this.persons.splice(index + 1, 0, ...deleteItem);
    }
  }
})

在"就地复用"策略中，点击按钮，输入框不随文本一起下移，是因为输入框没有与数据绑定，所以vuejs默认使用已经渲染的dom，然而文本是与数据绑定的，所以文本被重新渲染。这种处理方式在vue中是默认的列表渲染策略，因为高效。

这个默认的模式是高效的，但是在更多的时候，我们并不需要这样去处理，所以，为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，我们需要为每项提供一个唯一key特性，Vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

key的使用方法

预期值：number | string 有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误，key应唯一。

<ul id="app">
  <li v-for="(person, index) in persons" :key="person">
    {{ person }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    persons: ['杉杉', '思思', '哥哥', '小明']
  }
}) 

不建议将数组的索引作为key值，如：

<li v-for="(person, index) in persons" :key="index">
  {{ person }}
</li>

当改变数组时，页面会重新渲染，Vue会根据key值来判断要不要移动元素。例如当页面重新渲染时，key值为"杉杉"的元素为<li>杉杉</li>，页面重新渲染前，key值为"杉杉"的元素也为<li>杉杉</li>，那么Vue就会移动这个li元素，而不是重新生成一个元素。 当使用数组的索引作为key值时，页面重新渲染后，元素的key值会重新被赋值，例如我们将数组进行反转， 反转前：

反转后：

Vue会比对渲染前后拥有同样key的元素，发现有变动，就会再生成一个元素，如果用索引作key值得话，那么此时，所有的元素都会被重新生成。

那么key如何唯一的？

跟后台协作时，传回来的每一条数据都有一个id值，这个id就是唯一的，用id做key即可。

key不仅为v-for所有，它可以强制替换元素，而不是重复使用它：

<ul id="app">
  <button @click="show = !show">{{ show ? '显示' : '隐藏'}}</button>
  <input type="text" v-if="show" key="a" />
  <input type="text" v-else key="b" />
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    show: true
  }
}) 

v-for 和 v-if 一同使用

永远不要把 v-if 和 v-for 同时用在同一个元素上。 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以这个模板：

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

将会经过如下运算：

this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})

因此哪怕我们只渲染出一小部分用户的元素，也得在每次重新渲染的时候遍历整个列表，不论活跃用户是否发生了变化。 所以以下两种场景，我们可以做出如下处理：

1. 为了过滤一个列表中的项目。

<ul id="app">
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'a', isActive: true, id: 1},
      { name: 'b', isActive: false, id: 2},
      { name: 'ct', isActive: false, id: 3},
      { name: 'd', isActive: true, id: 4},
    ]
  }
})

可以把上面的代码更新为：

 <!-- 通过原来的数组，得到一个新数组，渲染这个新的数组 --> 
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'a', isActive: true, id: 1},
      { name: 'b', isActive: false, id: 2},
      { name: 'c', isActive: false, id: 3},
      { name: 'd', isActive: true, id: 4},
    ],
    activeUsers: []
  }
})
vm.activeUsers = vm.users.filter(user => user.isActive);

这种方式仅为演示，在日后学习完计算属性后，要利用计算属性来做。

1. 为了避免渲染本应该被隐藏的列表

<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'a', isActive: true, id: 1},
      { name: 'b', isActive: false, id: 2},
      { name: 'c', isActive: false, id: 3},
      { name: 'd', isActive: true, id: 4},
    ],
    shouldShowUsers: false
  }
})

html部分可替换成为：

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

将 v-if 置于外层元素上，我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是，我们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for。

练习_仿淘宝商品筛选

css文件联系博主获取文件，所需数据：

goodsList: [
  {
    title: '上装',
    typeList: ['全部', '针织衫', '毛呢外套', 'T恤', '羽绒服', '棉衣', '卫衣', '风衣' ],
    id: 1,
  },
  {
    title: '裤装',
    typeList: ['全部', '牛仔裤', '小脚/铅笔裤', '休闲裤' ,'打底裤', '哈伦裤'],
    id: 2,
  },
  {
    title: '裙装',
    typeList: ['全部', '连衣裙', '半身裙', '长袖连衣裙', '中长款连衣裙'],
    id: 3,
  }
]

练习_todoList

联系博主获取练习文件~

最后

如果对您有帮助，希望能给个👍评论收藏三连！

博主为人老实，无偿解答问题哦❤