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

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

Keaiting12134

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

阅读量1k

点赞数

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

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

版权

自己简单的学习了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" >