vue品牌案例管理项目

学习vue的第二天

---

前言

学习vue的第二天项目练习

---

一、项目的预分析

      功能：项目要实现基本的增删改查功能

      搭建基本结构： 

1. 引入bootstrap

2. 引入vue

二、项目搭建

1.搭建静态页面

  <div class="panel panel-primary" id="app">
    <div class="panel-heading">
        <h3 class="panel-title">添加品牌</h3>
    </div>
    <div class="panel-body"> 
        <form action="" method="" class="form-inline" role="">
          <div class="form-group">
            <label class="" for="">ID</label>
            <input v-model="idInput" type="email" class="form-control" id="" placeholder="输入id">
          </div>
          <div class="form-group">
            <label class="" for="">name</label>
            <input v-model="nameInput" type="email" class="form-control" id="" placeholder="输入名称">
          </div>
          <button @click="addCar" type="button" class="btn btn-primary">添加</button>
          <div class="form-group">
            <label class="" for="">关键字</label>
            <input v-model="searchInput" type="text" class="form-control" id="" placeholder="输入关键字" @keyup.enter="searchCar">
          </div>                                                                                                                                                                   
        </form>

    </div>
    <table class="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>name</th>
            <th>时间</th>
            <th>operation</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in searchCar()">
            <td>{
   
   {item.id}}</td>
            <td>{
   
   {item.name}}</td>
            <td>{
   
   {item.data|dateFormat('YYYY-MM-DD')}}</td>
            <td><button type="button" class="btn btn-danger" @click="deleteCar(item.id)">删除</button><button type="button" class="btn btn-primary" @click="modify(index)">修改</button></td>
          </tr>
        </tbody>
     </table>
</div>

2.vue部分

   // 过滤器
   Vue.filter('dateFormat', function (time, format) {
      let y = time.getFullYear();
      let m = (time.getMonth() + 1).toString().padStart(2, '0');
      let d = time.getDate().toString().padStart(2, '0');
      return format.replace('YYYY',y).replace("MM",m).replace('DD',d)
   })
   //创建vue对象
  let vm=new Vue({
    el:'#app',
    data:{ 
      idInput:'',
      nameInput:'',
      searchInput:'',
      //初始的内容列表
      list:[
        {
          id:1,
          name:'宝马',
          data:new Date()
        },
        {
          id:2,
          name:'凯迪拉克',
          data:new Date()
        },
        {
          id:3,
          name:'五菱宏光',
          data:new Date()
        }
      ]
    },
    methods:{
      //添加功能
      addCar(){
        if (this.list.some(item=>item.id==this.idInput)) {
          confirm('该id已存在')
        }else {
          this.list.push({
            id:this.idInput,
            name:this.nameInput,
            data: new Date()
          })
        }
        
      },
      //删除功能
      deleteCar(id){
        if (confirm('确定要删除吗？')) {
          this.list.forEach((item,index) => {
            if (item.id==id) {
              this.list.splice(index,1)
            }
          });
        }
      },
      //查找功能，上面遍历的就是此函数的返回值
      searchCar(){
        return this.list.filter(item=>item.name.includes(this.searchInput))
      },
      //修改名称
      modify(index){
        let newName=prompt('请输入新的名称')
        if (newName!=null) {
          this.list[index].name=newName
        }
      }
    }
  })

 

---