table数据动态添加与删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.css"/>
	  <script type="text/javascript" src='js/vue.js'></script>
    <!-- <script type="text/javascript" src='js/index.js'></script> -->
    <script type="text/javascript" src='js/index2.js'></script>
</head> 
<body>
  <!-- 
    功能:
    文本框中输入值,点击添加按钮,将输入的值添加到列表中。列表中的每一行都有删除按钮,点击删除该行
    1:获取输入框的值传到js中的变量(v-model),并添加到lists中(this.lists.unshift({name:'',state:''}))
    2:遍历显示lists中的值
   -->
    <div id="my" >
      <div class="panel panel-info" style="margin:20px;">
         <!-- 头部 -->
        <div class="panel-heading">
            <h1 style="display: inline-block;">{{userName}}的购物清单列表</h1>
            <span>清单总数
              <span class="label label-warning" >{{lists.length}}</span>
            </span>
        </div>
        <!-- 内容 -->
        <div class="panel-body">
            <div class="input-group">
              <input class="form-control" type="text" v-model="inputValue"/> 
              <span class="input-group-btn">
                <button class="btn btn-primary" @click="add()">添加</button>
              </span>
            </div>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>清单名称</th>
                  <th>状态</th>
                  <th>删除</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(value,index) in lists">
                  <td>{{value.name}}</td>
                  <td>{{value.state}}</td>
                  <td><button type="button" class="btn btn-danger btn-sm" @click="del(index)">删除</button></td>
                </tr>
              </tbody>
            </table>
        </div>
      </div>
           
    </div>
</body>
</html>
window.onload = function(){
    new Vue({
        el:'#my',
        data:{
            userName:'朱家润',
            inputValue:'',
            lists:[
                {name:'手机',state:'0'},
                {name:'电脑',state:'0'},
                {name:'Ipad',state:'0'},
                {name:'手表',state:'0'}
            ]
        },
        methods:{
            add:function(){
                this.lists.unshift({name:this.inputValue,state:'0'})
                this.inputValue="";
            },
            del:function(index){
                this.lists.splice(index,1);
            }
        }
    });
}

 

阅读更多

没有更多推荐了,返回首页