基于vue2.0动态组件及render详解
时间:2019-04-13
本文章向大家介绍基于vue2.0动态组件及render详解,主要包括基于vue2.0动态组件及render详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如下所示:
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>这里是Boor</h2> <component v-bind:my-data="items" v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变! --> </component> <a class="explain">直直</a> <button v-on:click="addData">点击</button> </div> </template> <script> //import $ from '@/assets/scripts/lib/zepto.min' //console.log($); //import Vue from 'vue' function isEmptyObject(e) { var t; for (t in e) return !1; return !0 } function objectLength(o) { var len = 0; for(var p in o) { len++; } return len; } let data ={ c_0:{c:1}, c_1:{c:2}, c_2:{c:3}, c_3:{c:4} }; let num = 0; //console.log(objectLength(data)); const MyComponent = { //template: '<h3 v-for="item in items">{{ item.c}}</h3>', props: ['myData'], data(){ return{ //items : myData } }, render: function (createElement) { debugger; let items = this.myData; //items = JSON.stringify(items); let num = objectLength(items); if (!isEmptyObject(items)) { debugger; return createElement('div', Array.apply(null, { length: num }).map(function (v,index) { return createElement('h3', items['c_'+index]['c'].toString()) })) } else { return createElement('h1', '没有数据!'); } } }; // 注册 //Vue.component('my-component', MyComponent); export default { name: 'bar', data () { return { msg: 'Bar', fuck: 'Hello', items: data, currentView: MyComponent } }, methods:{ addData : function(){ for(let p in data) { if(p == 'c_'+num) { data[p] = {'c': num }; } else { data['c'+num] = {'c': num }; } } num++; } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
以上这篇基于vue2.0动态组件及render详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 恢复控制文件避免使用resetlogs选项 (r10笔记第12天)
- Go实现短url项目
- 【Go 语言社区】GO语言多核并行化的问题
- mysql执行计划看是否最优
- 通过IP定位区域的SQL优化思路(r10笔记第10天)
- Java基础-day06-知识点回顾与练习
- 【Go 语言社区】Golang语言的多核并行化例子
- 一条SQL语句的执行计划变化探究(r10笔记第9天)
- 【Go 语言社区】Web 通信 之 长连接、长轮询(long polling)--转
- Dubbo入门-协议;注册中心
- Oracle 12c PDB浅析(二)(r8笔记第29天)
- 【Go 语言社区】在 Go 语言中,如何正确的使用并发
- Data Guard高级玩法:通过闪回恢复failover备库 (r10笔记第7天)
- ajax跨域问题-web开发必会
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android Koin2基本使用的那件事儿
- 一篇文章弄懂kotlin的扩展方法
- 浅谈Android客户端与服务器的数据交互总结
- Android 连接匿名WiFi的示例代码
- Android自定义图文跑马灯效果
- Android自定义View实现可展开、会呼吸的按钮
- Android仿google now效果的呼吸按钮
- Kotlin中双冒号::使用方法
- android实现简单左滑删除控件
- Android几种多渠道打包的步骤详解
- RadioButton实现选择后可取消选择
- Android数字选择器NumberPicker使用详解
- Listvie简单实现购物车功能
- RXjava网络获取图片数据的方法
- VerticalBannerView仿淘宝头条实现垂直轮播广告