Vue 组件的动态添加与删除
时间:2019-08-30
本文章向大家介绍Vue 组件的动态添加与删除,主要包括Vue 组件的动态添加与删除使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、场景:做表单的过程中遇到联系人、工作经历等可能不止一项,这时候就需要组件的动态添加与删除,以下就是组件添加与删除的一个简单实现。
二、实现代码
index.vue
<template> <section> <button @click="add()">点击添加</button> <hr/> <my-test v-for="(item, index) in people" :key="index" :index="index" :itemC="item" @deleteIndex="del" ></my-test> <button @click="confirm()">确定</button> </section> </template> <script> import MyTest from './myTest.vue'; export default { components: { MyTest }, data() { return { people: [{ name: '', phone: '', sex: '' }] }; }, methods: { add() { this.people.push({ name: '', phone: '', sex: '' }); }, del(val) { if (val !== 0) { this.people.splice(val, 1); } }, confirm() { console.log(this.people); }, } }; </script> <style lang="scss" scoped></style>
myTest.vue
<template> <section class="home"> <div>联系人{{index+1}}</div><br/> <span>姓名:</span> <input type="text" v-model="itemC.name" placeholder="请输入姓名" /><br/> <span>年龄:</span> <input type="text" v-model="itemC.phone" placeholder="请输入电话" /><br/> <span>性别:</span> <div class="sex" v-for="(el,idx) in sexType" :key="idx" @click="sexC(el)"> <i :class="{choose: el.isSelected}"></i> <p>{{el.name}}</p> </div> <button @click="deleteP">删除</button> <hr/> </section> </template> <script> export default { props: { itemC: { type: Object, default() { return {}; } }, index: { type: Number, required: true }, }, data() { return { sexType: [{ id: 0, name: '男', isSelected: false }, { id: 1, name: '女', isSelected: false }], choose: 'choose', }; }, methods: { deleteP() { this.$emit('deleteIndex', this.index); }, sexC(val) { if (val.isSelected === false) { val.isSelected = true; this.sexType.forEach((el) => { if (el.id !== val.id) { el.isSelected = false; } }); } else { val.isSelected = false; } this.itemC.sex = val.name; } } }; </script> <style lang="scss" scoped> .home { input { border: 1px solid #ccc; } .sex { display: flex; i { width: 16px; height: 16px; border-radius: 8px; border: 1px solid #ccc; } .choose { background: orange; } } } </style>
原文地址:https://www.cnblogs.com/attacking-cabbage/p/11435495.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PyQt5 技巧篇-增加一个类级变量,类级变量的设置方法,类级"常量"设置方法
- PyQt5 技巧篇-按钮隐藏并保留位置,设置按钮的可见度,设置按钮透明度
- PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态
- PyQt5 技巧篇-QWidget、Dialog界面固定大小设置
- 力扣:地下城游戏,手把手教你做困难题
- RN布局
- 学会MySQL主从复制读写分离,看这篇就够了
- Canal+Kafka实现MySQL与Redis数据同步
- 超详细canal入门,看这篇就够了
- 详细讲解!RabbitMQ防止数据丢失
- 详细讲解!从秒杀聊到ZooKeeper分布式锁
- 正确使用 wait/notify/notify方法以及源码解析
- 秒杀商品超卖事故:Redis分布式锁请慎用!
- 3D开发是一个生态,ThingJS支持js,css,json,html外部资源引用
- 手把手教你实现xxl-job分布式任务调度平台搭建