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

<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. Testlink解决大用例导入问题

    最近公司同事需要将别的testlink的用例迁移过来,由于现在新的服务器也在使用,不能使用数据库导入的办法,只能用xml文件进行导入,不过在导入的时候出现了个没遇到的问题,报错文件太大,无法上传. 解 ...

  2. 20165223《JAVA程序设计》第二周学习总结

    20165223 <JAVA程序设计>第二周学习总结 教材学习内容总结 第二章要点 标识符与关键字 基本数据类型 类型转换运算 输入输出数据 数组 第三章要点 运算符与表达式 语句概述 i ...

  3. 通俗易懂的来理解Iaas,Paas,SaaS

    首先我们先来了解一下这几个单词的意思和完全的英文 Iaas:Infrastructure as a service    基础设施即服务 Paas:Platform as a service   平台 ...

  4. Ubuntu下redis数据库的安装和配置详细过程

    Redis 安装 当前redis最新稳定版本是4.0.9 当前ubuntu虚拟机中已经安装好了redis,以下步骤可以跳过 最新稳定版本下载链接:http://download.redis.io/re ...

  5. 一个ArrayList在循环过程中删除，会不会出问题，为什么？

    ArrayList中的remove方法(注意ArrayList中的remove有两个同名方法,只是入参不同,这里看的是入参为Object的remove方法)是怎么实现的: public boolean ...

  6. loj6045 价

    题目链接 思路 从源点\(S\)向每种药连一条边权为\(-p+inf\)的边.从每种药向他所需要的药材连一条边权为\(INF\)的边.从每种药材向汇点\(T\)连一条边权为\(inf\)的边. \(I ...

  7. 奇怪的跨域访问：No 'Access-Control-Allow-Origin' header

    代码是几个月前写的,之前的几个月一直运行正常. 可今天使用的时候运行失败了,提示:No 'Access-Control-Allow-Origin' header 使用 chrome.firefox 都 ...

  8. TCHAR和CHAR类型的互转,string 转lpcwstr

    https://www.cnblogs.com/yuguangyuan/p/5955959.html 没有定义UNICODE,所以它里面的字符串就是简单用" "就行了,创建工程的时 ...

  9. python基础之FTP

    目的:实现客户端到服务器的上传功能 所需文件夹: 客户端是FTP_client             服务端是FTP_server bin文件存放执行文件,conf下存放配置文件,core下是核心文 ...

  10. 关于用户输入恶意js

    有些黑客经常闲得蛋疼的那别人的网站测试,利用一些输入的漏洞提交js代码,搞恶作剧. 对于freemarker视图的web应用,可以参考以下方法: http://yshjava.iteye.com/bl ...