Vue中数组遍历/添加元素/更新/过滤/排序操作

1.遍历数组：v-for

---

<div id="app">
    <ul>
      <template v-for="(book,index) in books">
        <li>{{index}}-{{book.name}}</li>
      </template>
    </ul>
  </div>
</script>
  <script>
    var app = new Vue({
      el:'#app',
      data:{
        books:[
          {
            name:'<<VUe.js>>',
          },
          {
            name:'<<CSS>>',
          },
          {
            name:'<<Javascript>>',
          }
        ]
      },
    });
    
  </script>

2.数组更新

---

2.1 为数组添加一项

例如，给示例的数组books添加一项
改变原数组的情况
使用push()为数组添加一项

<div id="app">
    <ul>
      <template v-for="(book in books">
        <li>书名:{{book.name}}作者：{{book.author}}</li>
      </template>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el:'#app',
      data:{
        books:[
          {
            name:'<<VUe.js>>',
            author:"Lihua",
          },
          {
            name:'<<CSS>>',
            author:"Xiaomig",
          },
          {
            name:'<<Javascript>>',
            author:"HanLei",
          }
        ]
      },
    });

    //方法1 使用push
     app.books.push({
       name:'<<h5>>',
       author:'Lea'
     })
  </script>

不改变原数组的情况
有些方法不会改变原数组，例如 filter(),concat(),slice()，他们返回一个新数组。

    //方法2 使用Vue内置的set方法
    Vue.set(app.books,3,{
      name:'<<h5>>',
      author:'Lea'
    }); 
    //注意：未导入Vue的情况下使用$set
    // app.$set(app.books,3,{
    //   name:'<<h5>>',
    //   author:'Lea'
    // })

    //方法3 使用splice
    app.books.splice(3,1,{
      name:'<<h5>>',
      author:'Lea'
    })

3.过滤

---

不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组，例如

<div id="app">
    <ul>
      <template v-for="book in filterBooks">
        <li>书名:{{book.name}} 作者：{{book.author}}</li>
      </template>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el:'#app',
      data:{
        books:[
          {
            name:'<<Vue.js>>',
            author:"Lihua",
          },
          {
            name:'<<CSS>>',
            author:"Xiaomig",
          },
          {
            name:'<<Javascript>>',
            author:"HanLei",
          }
        ]
      },
      computed:{
        filterBooks:function(){
          return this.books.filter(function(book){
            return book.name.match(/Java/);
          })
        },
      }
    });
    
  </script>

4.数组排序

<div id="app">
    <ul>
      <template v-for="book in sortedBooks">
        <li>书名:{{book.name}} 作者：{{book.author}}</li>
      </template>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el:'#app',
      data:{
        books:[
          {
            name:'<<Vue.js>>',
            author:"Lihua",
          },
          {
            name:'<<CSS>>',
            author:"Xiaomig",
          },
          {
            name:'<<Javascript>>',
            author:"HanLei",
          }
        ]
      },
      computed:{
        sortedBooks:function(){
          return this.books.sort(function(a,b){
            return a.name.length < b.name.length;
          });
        }
      }
    });
  </script>