2.v-for数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

【v-for数组角标语法】

v-for="(item,index) in items"

• items：要迭代的数组；
• item：迭代得到的数组元素别名；
• index ：迭代到的当前元素索引，从0开始 。

    <div id="app">
            <li v-for="(user,index) in users">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
 3.v-for遍历对象
 
【v-for遍历对象语法】
 
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
 
1个参数时，得到的是对象的值；
2个参数时，第一个参数是值，第二个参数是键；
3个参数时，第三个参数是索引，从0开始。
 
<div id="app">
        <li v-for="(value,key,index) in user">
            {{index}} - {{key}} : {{value}}
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'柳岩', gender:'女', age: 21}
</script>
 
4.v-for中的key
 
    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 
     这个功能可以有效的提高渲染的效率。
     但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。 
 【代码例子】
 
    <li v-for="(item,index) in items" :key=index></li>
【key使用说明】
 
这里使用了一个特殊语法：:key=""它可以让你读取vue中的属性，并赋值给key属性；
这里我们绑定的key是数组的索引，应该是唯一的。
 
【例子】
 
<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
    <li v-for="(p, index) in persons" key="p.id">
      {{p.id}}--{{p.name}}--{{p.age}}
      --<button @click="deleteP(index)">删除</button>
      --<button @click="updateP(index, {id: Date.now(), name: 'xxxx', age: 23})">更新</button>
  <h2>测试: v-for 遍历对象</h2>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [
        {id: 1, name: 'Tom', age: 15},
        {id: 2, name: 'Jack', age: 12},
        {id: 4, name: 'Bob', age: 17},
        {id: 6, name: 'Rose', age: 16},
        {id: 8, name: 'Else', age: 13}
    methods: {
      deleteP (index) {
       //splice再此处删除一个元素
        this.persons.splice(index, 1)
      updateP (index, newP) {
        console.log(this)
        // this.persons[index].name = newP.name
        // this.persons[index].age = newP.age
        // this.persons[index] = newP // 不会更新界面
        // 删除index，在插入newP
        this.persons.splice(index, 1, newP) // vue重写后的splice方法
        // this.persons = []
  Vue的数据绑定如何实现
    1. vue会监视data中所有层次的属性
    2. 对象中的属性数据通过添加set方法来来实现监视
    3. 数组中的元素也实现了监视: 重写数组一系列更新元素的方法
      1). 调用原生对应的方法对元素进行处理
      2). 去更新界面
</script>
 
5、过滤及排序
 
1. 列表过滤
2. 列表排序
  <div id="app">
    <input type="text" v-model="searchName">
      <li v-for="(p, index) in filterPersons" :key="p.id">
        {{p.id}}--{{p.name}}--{{p.age}}
    <button @click="sortType=2">按年龄升序</button>
    <button @click="sortType=3">按年龄降序</button>
    <button @click="sortType=1">原本顺序</button>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    data: {
      searchName: '',
      sortType: 1, // 排序的类型, 1: 不排序, 2: 升序, 3: 降序
      persons: [
        {id: 1, name: 'Tom', age: 15},
        {id: 2, name: 'Jack', age: 12},
        {id: 4, name: 'Bob', age: 17},
        {id: 6, name: 'Rose', age: 16},
        {id: 8, name: 'Else', age: 13}
    computed: {
      filterPersons () {
        // 1. 得到依赖数据
        const {sortType, searchName, persons} = this
        // 2. 进行计算处理, 产生结果数据并返回
        // 过滤
        const arr = persons.filter(p => p.name.indexOf(searchName)>=0)
        // 可能需要排序
        if (sortType!==1) {
          arr.sort((p1, p2) => {
            if (sortType===2) { // 升序
              return p1.age - p2.age 
            } else { // 降序
              return p2.age - p1.age
        return arr
  }).$mount('#app')
</script>
</body>

data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)" key: "" computed: { filterShoppingList: function () { // `this` <li v-for ="(book,index) in books":key="index"> 序号：{{index}},书名:{{book.name}},价格：{{book.price}} new Vue ({ el:"#app... <h2>普通for循环</h2> <li v-for="(item,index) in list" :key="item.id">{{index}}---{{item.name}}</li> 2.v-for条件 过滤 <div class="flex"