hdml指的是什么接口
254
2023-02-13
基于vue2.0动态组件及render详解
如下所示:
//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: '
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,
currevuVyQtbojPntView: MyComponent
}
},
methods:{
addData : function(){
for(let p in data) {
if(p == 'c_'+num) {
data[p] = {'c': num };
} else {
data['c'+num] = {'c': num };
}
}
num++;
}
}
};
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~