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

<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. zabbix监控概念

    监控:数据采集 --> 数据存储 -->  数据展示 报警:采集到的数据超出阈值 SNMP:Simple Network Management Protocol(只能实现数据采集) NMS ...

  2. 【LOJ6036】编码（2-sat）

    [LOJ6036]编码(2-sat) 题面 LOJ 题解 很显然的一个暴力: 枚举每个串中的?是什么,然后把和它有前缀关系的串全部给找出来,不合法的连边处理一下,那么直接跑\(2-sat\)就做完了. ...

  3. 超详解的LNMP搭建并优化

    环境为Centos7 nginx1.14 mysql5.7 php7一,安装Nginx (yum装,快速) yum install nginx二,优化nginx (方便后期工作,如果纯为测试的话,不用 ...

  4. [NOI2005]聪聪与可可(期望dp)

    题意:给一张无向图,有一只猫和一只老鼠,猫每秒会向老鼠的方向移动两个单位,若它们的距离为一,那么只会移动一个单位,老鼠会等概率向周围移动一步或不动,求猫抓到老鼠的期望时间. Solutionluogu ...

  5. Linux下启动,停止,重启Nginx、Mysql、PHP

    LINUX启动Nginx的命令: 一.查询是否启动 [root@jiang php-fpm.d]# ps -ef | grep nginx root 25225 1 0 19:26 ? 00:00:0 ...

  6. Typescript学习笔记（五） 模块机制

    javascript从es5之前都缺少一种模块机制,无法通过js引入文件,于是requirejs等等的加载器应运而生.这些加载器的使用也并不统一,产生了amd,commonjs,umd等等的规范,各有 ...

  7. An Introduction to OAuth 2

    PostedJuly 21, 2014 1.1mviews SECURITY API CONCEPTUAL Mitchell Anicas Introduction OAuth 2 is an aut ...

  8. P1886 P2216 单调队列模板

    何为单调队列? 单调队列是一个队列(废话) 而且必须同时满足下标单调和值单调两个单调特性. 跟优先队列不同,优先队列直接使用堆(heap)来实现,如何删去特定下标元素?不明. 本人喜欢用单调队列存下标 ...

  9. python: 反射机制；

    import comma def run(): inp = input('请输入要调用的函数').strip(); if hasattr(comma,inp): fun = getattr(comma ...

  10. jmeter5.0 while controller使用总结

    while controller 配合sql使用的方式 在while控制器条件中填空,这样当里面的请求断言失败后就会跳出循环 在while控制器条件中填LAST,当里面的请求断言失败后就会跳出循环,如 ...