VUE 实现多属性操作，增加删除修改属性。

最新推荐文章于 2022-06-02 16:16:05 发布

原创最新推荐文章于 2022-06-02 16:16:05 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

JQUERY + JS + CSS 同时被 3 个专栏收录

49 篇文章

订阅专栏

VUE

14 篇文章

订阅专栏

前端H5

13 篇文章

订阅专栏

本文展示了一个使用Vue.js实现的动态表格应用，表格可以添加和删除行，并实时更新数据。通过v-model双向绑定和v-for循环遍历，实现了数据与界面的同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <style>
      *{ margin: 0px; padding: 0px;}
    </style>
    <div id="app">
            {{message}}
       <table>
           <tr>
             <th>名称</th>
             <th>属性</th>
             <th>数量</th>  
             <td>操作</td>
           </tr>
           <tr v-for="(item,index) in speData">
             <td><input type="text" v-model="speData[index].name"></td>
             <td><input type="text" v-model="speData[index].labels"></td>
             <td><input type="text" v-model="speData[index].num"></td>
             <td><button v-on:click="speData.splice(index,1)">删除</button></td>
           </tr> 
           <tr>
             <td><button v-on:click="addSpec">添加</button> <button v-on:click="save()">提交</button></td>  
           </tr>  
       </table>
    </div>


<script>
  var app = new Vue({
      el:'#app',
      data:{
        message:'1111',
        speData:[{name:'1',labels:'1',num:'1'}],
      },
      //初始化方法创建数据
      mounted(){
          this.message = '22222';  
          this.speData= [{name:'香味',labels:'好香',num:'1'}];  //进入页面填充数据，JSON格式
      },
      methods:{
          //添加一行属性
          addSpec(){
              this.speData.push({name:'1',labels:'1',num:'1'});
          },
          //保存属性
          save(){
             alert(this.speData);
             alert(JSON.stringify(this.speData)) 
             console.log(this.speData); 
             console.log(JSON.stringify(this.speData));   
          }
      }
  })
</script>    
</body>
</html>