vue 动态添加组件

vue 利用数组循环动态添加组件

1. 实现效果：

当第一个框输入内容之后，点击添加，动态添加第二个输入框，以此类推；

2. 实现思想：

构建需要动态添加的模板，利用 v-for 循环模板。通过 index 判断当前模板，绑定当前值。当点击添加时利用数组方法 push 一个值进入数组从而达到添加一个相应模板的效果。利用 splice 删除相应位置的模板

3. 实现代码：

 <div class="regex_item"><div class="add_label_title"><label> 正则匹配：<span><img src="./images/question_icon.png" alt="疑问"></span></label></div><div class="regex_modals"><div v-for="(item,index) in regexNameList":key="index"class="regex_input"><dy-input placeholder="请输入正则匹配规则"v-model="item.name" /><span class="delete"@click="deleteRegex(index)">删除</span></div><div class="add_view"@click="addRegex()"> +添加</div></div></div>

export default {data() {return {regexNameList: [{name: ""}],};},methods: {// 添加一个模糊规则输入框addRegex() {this.regexNameList.push({ name: "" });},// 删除相应模糊规则输入框deleteRegex(index) {if (this.regexNameList.length > 1) {this.regexNameList.splice(index, 1);} else {this.regexNameList[index].name = "";}}},};

vue 动态添加组件相关推荐

【Vue】动态添加组件的两种实现
在Vue项目中,想要动态为页面上添加组件,是一件十分容易就能够实现的事情,这必须要得益于Vue框架的强力支持! 但有时候往往就是由于事情变得简单起来后,却突然忘记了要如何去实现.这大概就是对代码走火入 ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
vue动态添加路由之避坑指南
你是否遇到了: addRouter后出现白屏路由守卫出现死循环踩了很多坑之后,我终于悟到了vue动态添加路由的正确打开方式: 为了设计权限,在前端我们通常采取两种方式 1.在用户登录时获取该用户权 ...
vue 动态设置组件高度_高度动态的Vue明星评分组件
vue 动态设置组件高度虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars ratin ...
vue.js 动态添加组件
撸了今年阿里.头条和美团的面试,我有一个重要发现.......>>> 前端页面: <div class="container"><div cla ...
vue 修改模板{{}}标签_详解Vue 动态添加模板的几种方法
以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在*.vue文件里的 template 标签里写模板.但是有时候会需要动态生成 ...
vue 动态添加路由
为什么80%的码农都做不了架构师?>>> 最近在研究权限的相关东西,自然动态加载路由信息少不了.接下来我就来专门记录下我研究的东西. 1.首先后端代码返回一个对象,用java写 ...
如何利用VUE动态添加class样式
看注释, 就可以理解原理 <body><div id="a ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...
vue 动态添加html属性,vue.set如何添加属性？
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...

vue 动态添加组件

vue 利用数组循环动态添加组件

1. 实现效果：

2. 实现思想：

3. 实现代码：

vue 动态添加组件相关推荐

最新文章

热门文章