小编给大家分享一下基于vue2.0动态组件及render怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
如下所示:
<template> <div class="hello"> <h2>{{ msg }}</h2> <h3>这里是Boor</h3> <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: '<h4 v-for="item in items">{{ item.c}}</h4>', 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('h4', items['c_'+index]['c'].toString())
}))
} else {
return createElement('h2', '没有数据!');
}
}
};
// 注册 //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>h2, h3 {
font-weight: normal;
}ul {
list-style-type: none;
padding: 0;
}li {
display: inline-block;
margin: 0 10px;
}a {
color: #42b983;
}</style>
以上是“基于vue2.0动态组件及render怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注辰迅云云资讯频道!
辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
推荐阅读: rocketmq安装部署的方法是什么