vue学习小案例（一）：品牌列表案例

演示

目标区域代码（#app）：

用户进行添加查询操作的区域：

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">添加品牌</h3>
  </div>
  <div class="panel-body form-inline">
    <label>
      Id:
      <input type="text" class="form-control" v-model="id">
    </label>
    <label>
      Name:
      <input type="text" class="form-control" v-model="name">
    </label>
    <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
    <input type="button" value="添加" class="btn btn-primary" @click="add()">
    <label>
      搜索名称关键字：
      <input type="text" class="form-control" v-model="keywords">
    </label>
  </div>
</div>

数据展示区域：

<table class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Ctime</th>
      <th>Operation</th>
    </tr>
  </thead>
  <tbody>
    <!-- 通过search方法渲染数据，而是直接通过从data上面获取数据直接进行渲染 -->
    <tr v-for="item in search(keywords)" :key="item.id">
      <td>{{ item.id }}</td>
      <td v-text="item.name"></td>
      <td>{{ item.ctime }}</td>
      <td>
        <a href="" @click.prevent="del(item.id)">删除</a>
      </td>
    </tr>
  </tbody>
</table>

VM调度者：

var vm = new Vue({
  el: '#app',
  data: {
    id: '',
    name: '',
    keywords: '', // 搜索的关键字
    list: [
      { id: 1, name: '奔驰', ctime: new Date() },
      { id: 2, name: '宝马', ctime: new Date() }
    ]
  },
  methods: {
    add() { // 添加的方法
      var car = { id: this.id, name: this.name, ctime: new Date() }
      this.list.push(car);
      this.id = this.name = '';
    },
    del(id) { // 根据Id删除数据
      var index = this.list.findIndex(item => {
        if (item.id == id) {
          return true;
        }
      })
      this.list.splice(index, 1);
    },
    search(keywords) { // 根据关键字，进行数据的搜索
      return this.list.filter(item => {
        if (item.name.includes(keywords)) {
          return item;
        }
      });
    }
  }
});