基于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详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://blog.csdn.net/huang100qi/article/details/69062822

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Vue3.x如何设置浏览器动态Title方法

    Vue3.x如何设置浏览器动态Title方法

    这篇文章主要介绍了Vue3.x如何设置浏览器动态Title方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue项目打包之后背景样式丢失的解决方案

    vue项目打包之后背景样式丢失的解决方案

    今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 如何为老vue项目添加vite支持详解

    如何为老vue项目添加vite支持详解

    Vite是一个开发环境工具,旨在提高我们的开发速度,下面这篇文章主要给大家介绍了关于如何为老vue项目添加vite支持的相关资料,需要的朋友可以参考下
    2021-09-09
  • vue 更改连接后台的api示例

    vue 更改连接后台的api示例

    今天小编就为大家分享一篇vue 更改连接后台的api示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Mint UI组件库CheckList使用及踩坑总结

    Mint UI组件库CheckList使用及踩坑总结

    这篇文章主要介绍了Mint UI组件库CheckList使用及踩坑总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 在vue中使用rules对表单字段进行验证方式

    在vue中使用rules对表单字段进行验证方式

    这篇文章主要介绍了在vue中使用rules对表单字段进行验证方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 聊聊Vue.js的template编译的问题

    聊聊Vue.js的template编译的问题

    这篇文章主要介绍了聊聊Vue.js的template编译的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)

    VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)

    这篇文章主要介绍了VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新),本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2020-04-04
  • 详解在vue中如何实现屏幕录制与直播推流功能

    详解在vue中如何实现屏幕录制与直播推流功能

    屏幕录制和直播推流是现代Web应用中常用的功能,Vue作为一种流行的JavaScript框架,提供了一些工具和库,可以方便地实现屏幕录制和直播推流功能,本文将介绍如何在Vue中进行屏幕录制和直播推流,需要的朋友可以参考下
    2024-01-01
  • Electron+Vue3+Vite搭建桌面应用的示例代码

    Electron+Vue3+Vite搭建桌面应用的示例代码

    本文主要介绍了Electron+Vue3+Vite搭建桌面应用的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论