初学者-用VUE指令实现表格的增加、删除、修改操作

最新推荐文章于 2022-07-18 10:13:20 发布

学会闭嘴的Ting

最新推荐文章于 2022-07-18 10:13:20 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： html vue css

本文链接：https://blog.csdn.net/Fighting_hyt/article/details/110495316

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自己简单的学习了VUE的一些指令操作后，为了巩固知识，尝试用VUE的指令实现表格的增删改的操作，不涉及到后端。表格内容是VUE里面的对象数组实现的；效果图如下；
在这里插入图片描述
主要VUE涉及到的指令知识是：

v-show控制某一部分是否展示
v-bind绑定事件
v-model绑定数据
Vue自定义指令操作
Vue方法书写

下面展示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUEtest</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <link  href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <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>
    <style>
        *{
            font-size: 15px;
            font-family: "微软雅黑 Light";
        }
    </style>
</head>
<body >
<div  class="app" style="width:70%;margin: 0 auto;"align="center">
    <table align="center" class="table-strapped table table-striped table-bordered table-hover" >
        <h1>表格展示
            <div align="right" >
                <button class="button"  v-btcolor @click="More()">直接新增信息</button>
                <button class="button"  @click="Store()">保存信息</button>
            </div>
        </h1>
        <thead>
        <tr>
            <th>序号</th>
            <th >姓名</th>
            <th>分数</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody >

        <tr v-for="(item,key,index) in persons">
            <td ><input type="text" v-model="item.id" :disabled="isDisabled" placeholder="请输入序号"></td>
            <td ><input type="text" v-model="item.name" :disabled="isDisabled" placeholder="请输入姓名"></td>
            <td ><input type="text" v-model="item.score" :disabled="isDisabled" placeholder="请输入分数"></td>
            <td>
                <table >
                    <tr class="col-md-6">
                        <td><a @click="Exit()">编辑</a></td>
                    </tr>
                    <tr class="col-md-6">
                        <td><a @click="Del(item.id)">删除</a></td>
                    </tr>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</div>




<script>
    vue1=new Vue({
        el:'.app',
        data:{
            isDisabled:true,
            isShow:false,
            persons: [{id: 1,name:"小何",score:"99"},
                {id: 2,name: "小李", score: "88"},
                {id: 3,name: "小花",score: "88"},
                {id: 4,name: "小刘",score: "88"},
                {id: 5,name: "小明",score: "90"}]
        },
        methods:{
            Exit(){
                //允许编辑
                this.isDisabled=false
            },
            Store(){
                //禁止编辑
                this.isDisabled=true
            },
            Del(){
                //删除数据
                this.persons.splice(this.id,1)
            },
            Add(){
                // 展示新增数据的窗口
                this.isShow=true,
                    this.person.push({
                        id:'',
                        name:'',
                        score:''
                    })
            },
            More(){
                //直接新增数据
                this.persons.push({
                    id:'',
                    name:'',
                    score:''
                }), this.isDisabled=false
            }
        },
        directives:{
            "btcolor":{
                bind:function(el) {
                    el.style.color = "black";

                }
            }
        }
    })

</script>

</body>
</html>

有问题可在下方讨论哦~(0o0)