Vue.js表格增加删除demo

最新推荐文章于 2024-05-22 11:10:05 发布

lucky芬

最新推荐文章于 2024-05-22 11:10:05 发布

阅读量1.2w

点赞数 1

分类专栏： Vue.js

本文链接：https://blog.csdn.net/daimomo000/article/details/54138495

版权

Vue.js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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

下面例子运行结果如图：

<!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">
  <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>

lucky芬

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Vue.js表格增加删除demo

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。下面的例子会用到bootstrap.min.css以及vue.js，都可以从网上下载。 Vue.js小demo
复制链接

扫一扫