基于vue2.0动态组件及render详解


Posted in Javascript onMarch 17, 2018

如下所示:

<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详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
javascript继承机制实例详解
Nov 20 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
初步了解javascript面向对象
Nov 09 Javascript
jQuery的框架介绍
May 11 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 #Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 #Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 #Javascript
解决vue页面DOM操作不生效的问题
Mar 17 #Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 #Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 #Javascript
vue获取当前激活路由的方法
Mar 17 #Javascript
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php实现快速排序法函数代码
2012/08/27 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP实现文件下载详解
2014/11/27 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
ReactRouter的实现方法
2021/01/25 Javascript
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
深入理解Django-Signals信号量
2019/02/19 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Python 解析简单的XML数据
2020/07/24 Python
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
大学生个人推荐信范文
2013/11/25 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
街道社区活动报告
2015/02/05 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python