Vue获取数据和简单的增删、输入框聚焦自定义指令

最新推荐文章于 2024-04-03 01:35:13 发布

Q_MUMU

最新推荐文章于 2024-04-03 01:35:13 发布

阅读量284

点赞数 1

分类专栏： vue学习知识点记录文章标签： vue获取数据 vue增删

本文链接：https://blog.csdn.net/Q_MUMU/article/details/85091363

版权

本文介绍了如何在Vue中实现数据的获取、删除和添加功能，包括利用v-for动态生成表格内容，根据索引删除数据，以及通过v-model实现添加数据。此外，还讲解了创建一个自定义指令实现输入框聚焦的技巧。

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

- 需求：1.点击删除按钮删除数据 2.点击添加按钮添加数据

我在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./vue.js"></script>
  <style>

    #app{
    
            width:600px;
                margin:10px auto;
        }
          .tb{
    
              border-collapse:collapse;
              width: 100%;
          }
          .tb th{
    
              background-color: #0094ff;
              color:white;
          }
  
          .tb td,.tb th{
    
              padding:5px;
              border:1px solid black;
              text-align: center;
          }
  
          .add{
    
              padding: 5px;
              border:1px solid black;
              margin-bottom: 10px;
          }
      </style>
</head>

<body>
  <div id="app">
    <div class="add">
      <!-- 3.2 使用双向数据绑定获取input框的值 -->
      编号:<input type="text" v-model="newId">
      品牌名称:<input type="text" v-model=<