码迷,mamicode.com
首页 > 其他好文 > 详细

Vue实现品牌列表的增加删除功能

时间:2020-06-01 14:17:05      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:char   vue   click   event   body   meta   table   inpu   new   

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset=‘utf-8‘>
    <meta http-equiv=‘X-UA-Compatible‘ content=‘IE=edge‘>
    <title>品牌列表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../vue.js"></script>
</head>
<body>
      <div id="app">
      <!--完成添加功能-->
       <div class="panel panel-primary">
             <div class="panel-heading">
                   <h3 class="panel-title">添加品牌</h3>
             </div>
             <!--id-->
             <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>
              
                <input type="button" value="添加" class="btn btn-primary" @click="add()">

             </div>
       </div>
       
        <!--下面的代码表示展示区域-->
          <table class="table table-hover table-striped">
              <thead>
                  <tr>
                      <th>Id</th>
                      <th>Name</th>
                      <th>Ctime</th>
                      <th>Operation</th>
                  </tr>
              </thead>
              <tbody>
                  <tr v-for="item in list" :key="item.id">
                       <td>{{ item.id }}</td>
                       <td>{{ item.name }}</td>
                       <td>{{ item.ctime }}</td>
                       <td>
                           <a href="#" @click.prevent="del(item.id)">删除</a> 
                       </td>
                  </tr>
              </tbody>
          </table>   
      </div>

      <script>
       var vm = new Vue ({
           el : "#app",
           data : {
               id : ‘‘,
               name : ‘‘,
               list : [
                   {id: 1, name: ‘法拉第‘, ctime:new Date() },
                   {id: 2, name: ‘玛莎拉蒂‘, ctime:new Date() }
               ]
           },
           methods : {
                add(){   //这是添加的方法
                //获取id,name
                    var car = {id : this.id, name : this.name, ctime:new Date() }
                    this.list.push(car)
                    this.id = this.name = ‘‘
                },

                del(id){  //这是删除的方法 根据id删除数据
                   // console.log("hjjaha")   //测试
                    this.list.some((item, i)=>{
                        if(item.id == id){
                            this.list.splice(i,1)
                            return true;
                        }
                    })
                 }
              }
        });
      </script>
</body>
</html>
 
 
 
效果图如下:
技术图片

 

 

 
 
 

Vue实现品牌列表的增加删除功能

标签:char   vue   click   event   body   meta   table   inpu   new   

原文地址:https://www.cnblogs.com/tanxiong/p/13024619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!