Vuejs2.0 + bootstrap demo-优快云博客

本文介绍了一个使用 Vue.js 2.0 构建的简单应用案例，该应用包含一个可以动态添加和删除数据的表格。通过表单输入姓名和年龄后，点击按钮即可将数据添加到表格中，并提供了删除单条记录及清空所有记录的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <script src="./vue.js"></script>
  <script src="./vue.js"></script>
  <script src="../../plugins/jquery-1.9.1.min.js"></script>
  <script src="../../plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <title>Vuejs2.0 demo</title>
</head>
<body >

  <div id="app">

    <form action=""  onsubmit="return false;" role="form">
      <div class="form-group">
        <label class="control-label" for="inputName">姓名:</label>
        <div class="controls">
          <input type="text" id="inputName" placeholder="输入姓名" v-model="stu.name" class="form-control">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label" for="inputAge">年龄:</label>
        <div class="controls">
          <input type="text" id="inputAge" placeholder="输入年龄" v-model="stu.age" class="form-control">
        </div>
      </div>

      <div class="control-group">
      <button class="btn btn-small btn-primary"  v-on:click="add();">添加</button>
        <button  type="reset" class="btn btn-small btn-danger">重置</button>

      </div>
    </form>

     <table  class="table table-striped table-bordered">
       <caption class="h2 text-center">用户信息</caption>
       <tr><th>序号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
       <!--<tr>
       <td>1</td><td>lisi</td><td>20</td><td><button class="btn btn-small">删除</button></td>
       </tr>
       <tr>
         <td>2</td><td>lisi</td><td>30</td><td><button class="btn btn-small">删除</button></td>
       </tr>-->
       <tr v-for="(stu,index) in studata">
         <td>{{index + 1}}</td><td>{{ stu.name }}</td><td>{{ stu.age }}</td><td><button class="btn btn-small" v-on:click="del(index);">删除</button></td>
       </tr>

       <tr v-show="studata.length!=0">
         <td colspan="4" class="text-center">
           <button class="btn btn-small btn-danger"   v-on:click="delAll();">全部删除</button>
         </td>
       </tr>


       <tr v-show="studata.length==0">
         <td colspan="4" class="text-center">暂无数据</td>
       </tr>
     </table>

    <!-- <div id="box">
       <input type="text" v-model="msg">
       <span>{{msg}}</span>
     </div>-->
  </div>

  <script>
    window.onload = function(){
      new Vue({
        el:"#app",
        data:{
          msg:"用户信息表",
          studata:[],
          stu:{name:"",age:""}
        },
        methods:{
          add:function(){
            //this.stu = {name:"lisi",age:"20"};
            this.studata.push(this.stu);
            this.stu = {};
          },
          del:function(n){
            this.studata.splice(n,1);
          },
          delAll:function(){
            this.studata = [];
          }
        }
      });
    }
  </script>

</body>
</html>