vue + bootstrap 直接操作数据的列表清单的制作

最新推荐文章于 2024-05-30 10:00:41 发布

笔临

最新推荐文章于 2024-05-30 10:00:41 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/panhuanqin/article/details/83753149

版权

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 基本的表格</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
   
   
   <div id="box">
         <div class="page-header">
           <h1 style="display: inline-block">{{name}}的购物清单列表</h1>
          <span>清单总数<span class="label label-warning">{{items.length}}</span></span>
            <span>未采购数<span class="label label-success">{{count}}</span></span>
         </div>
          <div class="panel">
        <div class="input-group">
          <input class="form-control" v-model="text" />
          <span class="input-group-btn"><button class="btn btn-default" @click="addItem(text)">添加</button></span>
        </div>
        <table class="table table-striped">
          <thead>
             <tr>
                <th>清单名称</th>
                <th>已采购</th>
                <th>状态</th>
                <th>删除</th>
             </tr>
          </thead>
          <tbody>
             <tr v-for="(index,item) in items">
                    <td>{{item.action}}</td>
                    <td><input type="checkbox" v-model="item.state" v-on:click="changelist()" /></td>
                    <td>{{item.state}}</td>
                    <td><button v-on:click="del(index)">删除</button></td>
             </tr>
          </tbody>
        </table>
   </div>
   </div>
   
<script type="text/javascript">
   window.οnlοad=function(){
        new Vue({
               el:"#box",
               data:{
                  name:"小朋友",
                  items:[
                  {action:"外套",state:false},
                  {action:"保暖衣",state:false},
                  {action:"夹克男士",state:true},
                  {action:"化妆品",state:false}
                  ],
                   text:'',
                   count:0
               },
               mounted:function(){ 
                  alert(1)
                  this.changelist()
               },
               methods:{
                  addItem:function(text){
                     if(text=="")return;
                     
                     this.items.push({action:text,state:false});
                     this.text='';
                     this.changelist()
                  },
                  changelist:function(){
                     
                     var _this = this;
                     _this.count=0;
                     this.items.forEach(function(element,index){
                        if(!element.state){
                           _this.count++;
                        }
                     })
                  },
                  del:function(index){
                  
                     if(this.items[index].state==true){
         
                        this.items.splice(index,1);
                     }
                  }
               }
              })
  
   }
            
    </script>
</body>
</html>

笔临

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue + bootstrap 直接操作数据的列表清单的制作

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Bootstrap 实例 - 基本的表格&lt;/title&gt; &lt;link rel="stylesheet" href="htt
复制链接

扫一扫