09品牌管理案例

09品牌管理案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/moment.js"></script>
    <style>
        th,td{
            height: 20px;
            /*width: 260px;*/
            font-size: 40px;
            border: 1px solid red;
            text-align: center;
        }
        table{
            border-collapse:collapse;
        }
        input{
            margin-top: 30px;
            margin-bottom: 30px;
            height: 40px;
            width: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <lable>Id:
        <input type="text" v-model="id">
    </lable>
    <lable>Name:
        <input type="text" v-model="name">
    </lable>

    <input type="button" value="添加" @click="add" :style="{color:'red'}">

    <lable>搜索关键字:
        <input type="text" v-model="keyword">
    </lable>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Time</th>
                <th>Del</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,i) in search(keyword)" :key="i">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time | dataFormat(pattern)}}</td>
                <td><a href="javascript:;" @click.prevent="jian(item.id)">删除</a></td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    Vue.filter('dataFormat',function (dataStr,pattern='YYYY-MM-DD HH:mm:ss') {
      return moment(dataStr).format(pattern)
    })
  var vm = new Vue({
    el:'#app',
    data(){
      return {
        list:[
          {id:1,name:'奔驰',time:new Date()},
          {id:2,name:'宝马',time:new Date()},
          {id:3,name:'奇瑞',time:new Date()},
        ],
        id:"",
        name:"",
        keyword:''
      }
    },
    methods: {
      add(){
        this.list.push({id:this.id,name:this.name,time:new Date()})
        this.id=""
        this.name=""
      },
      jian(id){
        // 根据id找到要删除对象的索引
        // for(var i=0,i<this.list.length,i++)
        // this.list.some((item,i) =>{
        //   if(item.id==id){
        //     this.list.splice(i,1)
        // }
        // })
        // var idd=id-1
        // this.list.splice(idd,1)
        var index=this.list.findIndex((item,i) => {
          if(item.id==id){
            return true;
        }
        })
        this.list.splice(index,1)
      },
      //根据关键字进行搜索
      search(keyword){
        // var newlist=[]
        // this.list.forEach(item=>{
        //   if(item.name.indexOf(keyword) != -1){
        //     newlist.push(item)
        //     }
        // })
        // return newlist
        // 注意  foreach  some   filter  findindex
        return this.list.filter(item =>{
          // includes包含  返回true   否则false
          if(item.name.includes(keyword)){
            return item
            }
        })
      }
    }
  })
    // 第一个参数永远是是过滤器管道符传过来的数据
    // Vue.filter('过滤器名称',function () {
    //  
    // })
</script>
</body>
</html>
猜你喜欢
