vue--表格操作

最新推荐文章于 2023-05-15 13:47:51 发布

Biebersxzl

最新推荐文章于 2023-05-15 13:47:51 发布

阅读量3.2k

点赞数

分类专栏：个人博客技术 vue 文章标签： vue table 数据驱动

本文链接：https://blog.csdn.net/Biebersxzl/article/details/82080280

版权

本文通过一个简单的HTML和JS示例，详细介绍了如何在Vue中进行表格数据的增删操作，强调了Vue的数据驱动特性。从初始界面到插入（包括不完整信息的错误提示）和删除信息的流程，适合Vue初学者实践。

摘要由CSDN通过智能技术生成

vue操作表格的增删，再体会一下vue的数据驱动

一个html，一个js，上代码

1.html代码

 1 <!DOCTYPE html> 

 2 <html> 

 3 <head> 

 4     <meta charset="utf-8"> 

 5     <title></title> 

 6     <style type="text/css"> 

 7     #app{
   

 8         width: 600px; 

 9         margin:50px auto;  

10     } 

11     #search input{
   

12         width: 80px; 

13         height: 30px; 

14     } 

15     #search button{
   

16         width: 50px; 

17         height: 38px; 

18         background-color: skyblue; 

19         border: 1px solid blue; 

20     } 

21     table{
   

22         width: 500px; 

23         text-align: center; 

24         marg