组件可以是动态的，记录如下

<div v-for="item in arrComponent">

<component v-bind:is="item.componentName"></component>

</div>
...
import componentName from './componentName';
...
arrComponent:[
{
componentName: 'componentName'
}]
components: {
'component-name': componentName,
},

vue 组件动态 循环的更多相关文章

  1. vue组件---动态组件&异步组件

    (1)在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件.接下来简单回顾下 <component>元素是vue 里面的一个内置组件.在里面使 ...

  2. vue中动态循环model

    vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...

  3. Vue组件-动态组件

    动态组件 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以让多个组件使用同一个挂载点,并动态切换: <div id="app6"& ...

  4. vue组件---动态组件之多标签页面

    首先看下效果图 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  5. Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用

    template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...

  6. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  7. Vue 组件4 动态组件

    动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...

  8. Vue （表单、斗篷、条件、循环指令，分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数）

    表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  9. vue组件上动态添加和删除属性

    1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...

随机推荐

  1. 「洛谷2495」「BZOJ3052」「SDOI2001」消耗战【虚树+树形动态规划】

    题目大意 给你\(k\)个点,让这一些点和一号节点断开,删去某一些边,求最小的删去边权之和. 做题的心路历程 做了\(HG\)昨天的模拟赛,深深感觉到了窝的菜,所以为了\(A\)掉T1这一道毒瘤,窝就 ...

  2. [luogu3628][bzoj1911][APIO2010]特别行动队【动态规划+斜率优化DP】

    题目描述 给你一个数列,让你将这个数列分成若干段,使其每一段的和的\(a \times sum^2 + b \times sum + c\)的总和最大. 分析 算是一道斜率优化的入门题. 首先肯定是考 ...

  3. RabbitMQ图解

    一.MQ对比 二.RabbitMQ模式 三.队列模式 四.公平分发 五.主题模式

  4. Baker Vai LightOJ - 1071 （MCMF）

    在个给出的矩阵从,从左上角走到右下角,然后再从右下角走到左上角,两次不能经过想同的点,每个点都有一个价值,问最大的价值是多少. 可以把原来的问题化简成从左上角走两条路到右下角,然后把价值加起来,然是这 ...

  5. pandas isin

    在已知id索引的情况下,如何获取所需要的行呢?已经不止一次遇到这样的情况,经历过重重筛选,所得到的最终结果是一串满足所有条件的id列表. pandas 的isin 能很好的解决这个问题, import ...

  6. 单片机的外围功能电路 LET′S TRY“嵌入式编程”: 2 of 6

    单片机的外围功能电路 LET′S TRY“嵌入式编程”: 2 of 6 本连载讲解作为嵌入式系统开发技术人员所必需具备的基础知识.这些基础知识是硬件和软件技术人员都应该掌握的共通技术知识. 上期在&l ...

  7. centos7使用yum安装zabbix3.4

     应用环境: 关于ZABBIX: zabbix一开强大的开源监控工具,同类型还有nagios,ganglia,cacti等监控工具,通过过去一年Google趋势就知道zabbix全球的相对热度:   ...

  8. 杨辉三角 II

    题目描述 给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 3 输出: [1,3,3,1] 贴出代码 class ...

  9. 分考场（无向图着色问题）（dfs回溯）

    问题描述 n个人参加某项特殊考试. 为了公平,要求任何两个认识的人不能分在同一个考场. 求是少需要分几个考场才能满足条件. 输入格式 第一行,一个整数n(1<n<100),表示参加考试的人 ...

  10. Windows下使用Diskpart格式化U盘

    步骤 进入Diskpartdiskpart 列出所有的磁盘list disk 选择磁盘select disk 清楚clean 创建主分区creat partition parimary 激活当前分区a ...