Vue - 动态添加移除 DOM元素（输入框示例）

墨蓝 2022-09-02 00:45 483阅读 0赞

## 效果图 ##

> 该示例代码简洁干净，可直接复制运行查看效果。

`Vue` 动态添加移除 `DOM` 元素，基于此示例可拓展为自身业务逻辑。  
![在这里插入图片描述][fa5c1d4e7fa943c28e6ffac60f4e90da.gif]

## 完整代码 ##

> 引入 `Vue` 采用 `CDN` 形式 ，如已经失效请自行引入。

新建 `*.html` 复制以下代码，浏览器运行查看效果即可。

<body>
        <div id="body">
            
            
            <div>
                姓名: <input v-model="temp.params[0].key">
                手机：<input v-model="temp.params[0].value">
                <button @click="addParams()">+</button>
            </div>
            
    
            
            <div v-for="num in total" :key="num">
                姓名: <input v-model="temp.params[num].key">
                手机：<input v-model="temp.params[num].value">
                <button @click="delParams(num)">-</button>
            </div>
            
    		
    		
    		
            {
       { temp.params }}
            <br>
            {
       { total }}
            
        </div>
    </body>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script> const vm = new Vue({ el: '#body', data: { temp: { params: [ // 默认存在的输入框(+) { key:'', value:'' }, // 手动添加的输入框(-) // ... ] }, // 总共添加了多少个 total: 0 }, methods: { /** * 添加项目 * 追加数据且总数+1 * @return void */ addParams: function() { this.temp.params.push({ key:'', value:''}) this.total ++ }, /** * 移除项目 * 移除数据且总数-1 * @param {Number} num - 索引值 * @return void */ delParams: function(num) { this.temp.params.splice(num, 1) this.total -- } } }) </script>

[fa5c1d4e7fa943c28e6ffac60f4e90da.gif]: /images/20220829/226501ed6e3a4dc09b4d2d0e77fd1e35.png