基于vue2.0动态组件及render详解
程序员文章站
2022-03-13 11:37:35
如下所示：
{{ msg }}
{{ msg }}
如下所示：
<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详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
如下所示：
<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详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。