欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js实现的表格增加删除demo示例

程序员文章站 2022-11-20 11:33:56
本文实例讲述了vue.js实现的表格增加删除demo。分享给大家供大家参考,具体如下: vue.js是当下很火的一个javascript mvvm库,它是以数据驱动和组件...

本文实例讲述了vue.js实现的表格增加删除demo。分享给大家供大家参考,具体如下:

vue.js是当下很火的一个javascript mvvm库,它是以数据驱动和组件化的思想构建的。相比于angular.js,vue.js提供了更加简洁、更易于理解的api,使得我们能够快速地上手并使用vue.js。

使用本站在线html/css/javascript代码运行工具http://tools.jb51.net/code/htmljsrun,得到如下所示的运行效果:

Vue.js实现的表格增加删除demo示例

具体代码如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>vue.js小demo</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="external nofollow" >
 <style>
  label{float:left;line-height: 34px;}
  .panel-body{
    margin:30px auto;
  }
 </style>
</head>
<body>
<!-- 这是我们的view -->
<div class="col-md-6">
  <div class="panel panel-default" id="app" >
  <div class="panel-body">
      <div class="form-group">
        <label class="col-md-2 control-label">name:</label>
        <input type="text" class="col-md-9 form-control" v-model="newperson.name"/>
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">age:</label>
        <input type="text" class="col-md-9 form-control" v-model="newperson.age">
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">sex:</label>
        <select class="col-md-9 form-control" v-model="newperson.sex">
          <option value="male">male</option>
          <option value="female">female</option>
        </select>
      </div>
      <div class="form-group">
        <label class="col-md-8"></label>
        <button class="col-md-3" @click="createperson">create</button>
      </div>
    </div>
  <div class="panel-body">
    <table class="table text-center">
        <thead>
          <tr >
            <th class="text-center">name</th>
            <th class="text-center">age</th>
            <th class="text-center">sex</th>
            <th class="text-center">delete</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="person in people">
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.sex }}</td>
            <td><button v-on:click="delperson($index)">delete</button></td>
          </tr>
        </tbody>
      </table>
    </div>
 </div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script>
//创建一个vue实例或"viewmodel",它连接view与model
var vm = new vue({
  el: '#app',
  data: {
    newperson: {
      name: '',
      age: '',
      sex: 'male'
    },
    people: [{
      name: 'jack',
      age: 30,
      sex: 'male'
    }, {
      name: 'bill',
      age: 26,
      sex: 'male'
    }, {
      name: 'tracy',
      age: 22,
      sex: 'female'
    }, {
      name: 'chris',
      age: 36,
      sex: 'male'
    }]
  },
  methods:{
    createperson: function(){
      this.people.push(this.newperson);
      // 添加完newperson对象后,重置newperson对象
      this.newperson = {name: '', age: '', sex: 'male'}
    },
    delperson: function(index){
      // 删一个数组元素
      this.people.splice(index,1);
    }
  }
});
</script>
</html>

希望本文所述对大家vue.js程序设计有所帮助。