搜尋
首頁web前端js教程vue2.0動態組件及render詳解
vue2.0動態組件及render詳解Mar 19, 2018 am 10:48 AM
render詳解

本文主要和大家分享vue2.0動態組件及render詳解,希望能幫助大家。

如下:


<template>
 <p class="hello">
 <h1 id="nbsp-msg-nbsp">{{ msg }}</h1>
 <h2 id="这里是Boor">这里是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>
 </p>
</template>
<script>
 //import $ from &#39;@/assets/scripts/lib/zepto.min&#39;
 //console.log($);
 //import Vue from &#39;vue&#39;
 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: &#39;<h3 id="nbsp-item-c">{{ item.c}}</h3>&#39;,
 props: [&#39;myData&#39;],
 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(&#39;p&#39;, Array.apply(null, { length: num }).map(function (v,index) {
  return createElement(&#39;h3&#39;, items[&#39;c_&#39;+index][&#39;c&#39;].toString())
  }))
 } else {
  return createElement(&#39;h1&#39;, &#39;没有数据!&#39;);
 }
 }
 };
 // 注册
 //Vue.component(&#39;my-component&#39;, MyComponent);
export default {
 name: &#39;bar&#39;,
 data () {
 return {
  msg: &#39;Bar&#39;,
  fuck: &#39;Hello&#39;,
  items: data,
  currentView: MyComponent
 }
 },
 methods:{
 addData : function(){
  for(let p in data) {
   if(p == &#39;c_&#39;+num) {
    data[p] = {&#39;c&#39;: num };
   } else {
    data[&#39;c&#39;+num] = {&#39;c&#39;: 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>

相關推薦:

#vue的自訂動態元件使用詳解

#

以上是vue2.0動態組件及render詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
vue3怎么通过render函数实现菜单下拉框vue3怎么通过render函数实现菜单下拉框May 10, 2023 pm 04:28 PM

技术方案先写一个下拉框组件首先,我们先写一个组件,用来展示下拉框内容。组件名称起为:Select.vue福利商城Saas平台活动定制渲染组件我们要将这个组件渲染在网页上,操作应该是这样的:当鼠标移动到产品服务时,将下拉框组件作为一个组件实例渲染在页面的合适位置。vue3中,渲染一个Vonde,核心逻辑如下:import{createVNode,h,render,VNode}from&#39;vue&#39;importcomponentfrom"./component.

Django框架中的缓存机制详解Django框架中的缓存机制详解Jun 18, 2023 pm 01:14 PM

在Web应用程序中,缓存通常是用来优化性能的重要手段。Django作为一款著名的Web框架,自然也提供了完善的缓存机制来帮助开发者进一步提高应用程序的性能。本文将对Django框架中的缓存机制进行详解,包括缓存的使用场景、建议的缓存策略、缓存的实现方式和使用方法等方面。希望对Django开发者或对缓存机制感兴趣的读者有所帮助。一、缓存的使用场景缓存的使用场景

Mpeppe (MPEPE) Coin: A New Contender in the Cryptocurrency Market Attracting Investors from Render (RNDR) and Internet Computer (ICP)Mpeppe (MPEPE) Coin: A New Contender in the Cryptocurrency Market Attracting Investors from Render (RNDR) and Internet Computer (ICP)Sep 03, 2024 pm 02:03 PM

The world of cryptocurrencies is always in flux, with new tokens capturing the attention of seasoned investors looking for the next big opportunity.

Gin框架的模板渲染功能详解Gin框架的模板渲染功能详解Jun 22, 2023 pm 10:37 PM

Gin框架是目前非常流行的Go语言Web框架之一。作为一个轻量级的框架,Gin提供了丰富的功能和灵活的架构,使得它在Web开发领域中备受欢迎。其中一个特别重要的功能是模板渲染。在本文中,我们将介绍Gin框架的模板渲染功能,并深入了解它的实现原理。一、Gin框架的模板渲染功能Gin框架使用了多种模板渲染引擎来构建Web应用程序。目前,它支持以下几种模板引擎:

Python中的GUI库wxPython详解Python中的GUI库wxPython详解Jun 09, 2023 pm 10:00 PM

Python是一种简洁、易学、高效的编程语言。它广泛应用于各种领域,如数据科学、人工智能、游戏开发、网络编程等。虽然Python自带有一些GUI库,但他们的功能较为简单,无法满足各类复杂应用的需求。因此,Python中有许多GUI库可供选择,其中wxPython是其中一个,本文将详细介绍。wxPython简介wxPython是一个开源、跨平台的GUI库,它基

PHP中的ORM框架使用详解PHP中的ORM框架使用详解Jun 23, 2023 am 11:22 AM

ORM(Object-RelationalMapping)框架是一种用于将面向对象编程语言中的对象模型与关系型数据库之间映射的技术。它使开发人员能够使用面向对象的方式操作数据库,而不需要直接操作SQL语言。在PHP开发领域中,ORM框架也得到了广泛的应用。本文将详细介绍PHP中的ORM框架使用方法。一、ORM框架的优点使用ORM框架有以下优点:1.提高开发

render是渲染的意思吗render是渲染的意思吗Feb 02, 2023 pm 02:52 PM

render是渲染的意思,是一种绘图术语;渲染是CG的最后一道工序,也是最终使图像符合的3D场景的阶段;渲染英文为Render,也有人会把它称为着色,但一般把Shade称为着色,把Render称为渲染。

PHP key_exists()函数用法详解PHP key_exists()函数用法详解Jun 26, 2023 pm 10:37 PM

PHP中的key_exists()函数用于检查指定的键是否存在于数组中。这个函数非常重要,因为在使用数组时需要检查数组中是否存在某个键,以便正确地处理数据。key_exists()函数的语法如下:boolkey_exists(mixed$key,array$array)其中,$key表示要检查是否存在的键,$array表示要搜索的数组。如果指定的键存

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境