vue在表格添加一行或者删除选择的行数

html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equ...

花开一度

2701人浏览 · 2019-10-21 21:48:44

花开一度 · 2019-10-21 21:48:44 发布

在这里插入图片描述

html

<!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">
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>Document</title>
</head>

<body>
    <div id="model">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>单价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) of book">
                    <td>{{i+1}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.author}}</td>
                    <td>{{v.price}}</td>
                    <td><button type="button" name="" id="" v-on:click="del(i)" class="btn btn-primary">删除</button></td>
                </tr>
                <!-- <tr>
                    </td>
                    <td><button type="button" name="" id="" class="btn btn-primary" btn-lg btn-block">删除</button></td>
                </tr> -->
            </tbody>
        </table>
        <form action="">
            <label>添加书籍</label>
            <div class="form-group col-md-3">
                <label for="">书名：</label>
                <input type="text" v-model="newBook.name" class="form-control" name="" id="" 
                    placeholder="">
                <small id="helpId"  v-bind:style="mystyle" class="">{{error1}}</small>
            </div>
            <div class="form-group col-md-3">
                <label for="">作者：</label>
                <input type="text"  v-model="newBook.author" class="form-control" name="" id="" 
                    placeholder="">
                <small id="helpId2" v-bind:style="mystyle" class="">{{error2}}</small>
            </div>
            <div class="form-group col-md-3">
                <label for="">价格：</label>
                <input type="text" v-model="newBook.price" class="form-control" name="" id="" 
                    placeholder="">
                <small id="helpId3" v-bind:style="mystyle" class="">{{error3}}</small>
            </div>
            <button type="button" v-on:click="addBook" name="" id="" class="btn btn-primary ">添加</button>
    </div>
    </form>

</body>
<script src="vue.min.js"></script>
</html>

 let vm = new Vue({
        el: '#model',
        data: {
            error1:'',
            error2: '',
            error3: '',
            mystyle:{
                color: 'red',
            },
            id: 3,
            newBook: {
                id:'',
                name: '',
                author: '',
                price: '',
            },
            book: [
                {
                    id: "1",
                    name: "红楼梦",
                    author: "曹雪芹",
                    price: "32"
                },
                {
                    id: "2",
                    name: "水浒传",
                    author: "施耐庵",
                    price: "30"
                },
                {
                    id: "3",
                    name: "三国演义",
                    author: "罗贯中",
                    price: "24"
                },
            ]


        },

        methods: {
        //添加一行
            addBook: function () {
                if(this.newBook.name==""){
                    this.error1="书名不能为空!"
                    return;
                }else{
                     this.error1 = ""
                }
                if(this.newBook.author == ""){
                    this.error2 = "作者不能为空！"
                      return;
                }else{
                   this.error2 = ""
                }
                if (this.newBook.price == "") {
                    this.error3 = "价格不能为空！"
                     return;
                }else{
                    this.error3 = ""
                    
                }
                // this.id += 1;
                // this.newBook.id= this.id;
                this.book.push(this.newBook);
                this.newBook = {
                    id: '',
                    name: '',
                    author: '',
                    price: '',
                };
                this.error1='';
                this.error2 = '';
                this.error3 = '';
            },
            //删除
            del:function(i){
                this.book.splice(i,1);
            }
        },
    })

注意删除一行后序号也会发生改变

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^