基于vue2.0动态组件及render详解
更新时间:2018年03月17日 12:52:16 作者:huang100qi
下面小编就为大家分享一篇基于vue2.0动态组件及render详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | < 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详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
这篇文章主要介绍了VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新),本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2020-04-04
最新评论