基于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 相关文章推荐
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
js回调函数原理与用法案例分析
Mar 04 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 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
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Python类继承和多态原理解析
2020/02/05 Python
django创建css文件夹的具体方法
2020/07/31 Python
python中random模块详解
2021/03/01 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
爱心倡议书范文
2014/05/12 职场文书
2014年施工员工作总结
2014/11/18 职场文书
大学军训心得体会800字
2016/01/11 职场文书
《春酒》教学反思
2016/02/22 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android