vue 实现在同一界面实现组件的动态添加和删除功能


Posted in Javascript onJune 16, 2020

 1.插入静态组件,将自己想要循环的组件显示在页面上,利用v-for进行循环操作,操作包括增删。

//所有要显示的子组件,写在一个li标签,有 v-for循环。
  <li v-for="(item, index) in questionList" v-bind:key="index">
          <el-row :gutter="20">
            <el-col offset="2" :span="4">
              <el-select
                size="small"
                v-model="chooseValue"
                multiple
                placeholdr="请选择试题类型"
                style="width:200px;margin-left:-40px"
              >
                <el-option :value="item.mineStatusValue" style="height:auto">
                  <el-tree
                    :data="data"
                    node-key="id"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  ></el-tree>
                </el-option>
              </el-select>
            </el-col>
            <el-col offset="3" :span="3">
              <el-select
                style="margin-left:-30px"
                size="small"
                v-model="item.value"
                placeholder="请选择">
                <el-option
                  v-for="item in questionoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col offset="2" :span="4">
              <el-input style="width:45px;" size="small" v-model="count">
                {{ item.count }}
              </el-input>
              <label> /0 </label>
            </el-col>
            <el-col :span="6">
              <el-input style="width:45px;" size="small" v-model="sourcess">
                {{ item.sourcess }}
              </el-input>
              <label>  </label>
              <!-- 在i标签设置删除按钮,运用splice函数。 -->
              <i class="el-icon-remove-outline"
                style="margin-left:20px"
                @click="questionList.splice(index, 1)"
              ></i>

2.增

在方法添加按钮,在点击添加按钮的时候将需要的参数传进数组,遍历数组,达到组件渲染。

//添加试题,组件循环显示
    addQuestion() {
      console.log("添加试题");
      this.questionList.unshift({
        mineStatusValue: this.mineStatusValue,
        questionoptions: this.questionoptions,
        count: this.count,
        sourcess: this.sourcess,
      });
    },

3.删

根据选中的组件,获取它的索引,根据下标把它删掉,更新数组,重选渲染组件。

注:删除的时候用到了splic函数,具体的使用可以自己了解。

<i class="el-icon-remove-outline"
  style="margin-left:20px"
  @click="questionList.splice(index, 1)">
</i>

4.效果

vue 实现在同一界面实现组件的动态添加和删除功能

PS:在Vue组件上动态添加和删除属性方法

如下所示:

在组件上添加属性 this.$set(this.data,"obj",value');

删除属性this.$delete(this.data,"obj",value');

总结

到此这篇关于vue 实现在同一界面实现组件的动态添加和删除的文章就介绍到这了,更多相关vue 组件动态添加和删除内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
javascript 事件绑定问题
Jan 01 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
详解JS预解析原理
Jun 16 #Javascript
深入了解JS之作用域和闭包
Jun 16 #Javascript
JS数组及对象遍历方法代码汇总
Jun 16 #Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 #Javascript
原生JS实现天气预报
Jun 16 #Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 #Javascript
原生JS实现无缝轮播图片
Jun 24 #Javascript
You might like
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php实现的简单检验登陆类
2015/06/18 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
VUE重点问题总结
2018/03/19 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
安全责任协议书
2014/04/21 职场文书
开工典礼策划方案
2014/05/23 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
干部对照检查材料范文
2014/08/26 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
自荐信大全
2019/03/21 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
关于Vue中的options选项
2022/03/22 Vue.js