vue2.0 dynamic components and render usage instructions
This time I will bring you the instructions for using vue2.0 dynamic components and render. What are the precautions for using vue2.0 dynamic components and render. Here is a practical case, let’s take a look.
is as follows:
<template>
<p 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>
</p>
</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('p', 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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the php Chinese website article!
Recommended reading:
vue.js routing is invalid and cannot be used
How to operate the vue function calling sequence
The above is the detailed content of vue2.0 dynamic components and render usage instructions. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement menu drop-down box in vue3 through render function
May 10, 2023 pm 04:28 PM
Technical solution: First write a drop-down box component. First, we first write a component to display the content of the drop-down box. The component name starts with: Select.vue Welfare Mall Saas Platform Activity Customized Rendering Component We want to render this component on the web page. The operation should be like this: when the mouse moves to the product service, render the drop-down box component as a component instance in appropriate location on the page. In vue3, rendering a Vonde, the core logic is as follows: import{createVNode,h,render,VNode}from'vue'importcomponentfrom"./component.
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.
Does render mean rendering?
Feb 02, 2023 pm 02:52 PM
Render means rendering and is a drawing term. Rendering is the last process of CG, and it is also the stage that finally makes the image conform to the 3D scene. Rendering is called Render in English, and some people will call it shading, but generally Shade is called For shading, Render is called rendering.
HMD Slate Tab 5G leakes as mid-range tablet with Snapdragon 7s Gen 2, 10.6-inch display and Lumia design
Jun 18, 2024 pm 05:46 PM
With the Skyline, HMD Global is set to unveil a mid-range smartphone in the style of the Nokia Lumia 920 on July 10. According to the latest information from the leaker @smashx_60, the Lumia design will soon also be used for a tablet, which will be c
How to use OnePlus budsPro_OnePlus budsPro instructions
Mar 23, 2024 am 10:11 AM
1. Switch between noise reduction mode and transparency mode. Press and hold the handle of the earphones for about 1 second to switch between noise reduction mode and transparency mode. 2. In music mode, press the earphone handle once to pause or play music. Press the earphone handle twice to play the next song. Press the earphone handle three times to play the previous song or wake up the voice. 3. In call mode, during a call, press the earphone handle once to answer or hang up the call. 4. How to reset Open the earphone box. When the charging box indicator light flashes red 5 times, release the button and the earphones are reset. 3. How to connect the phone 1. Open the charging box 2. Press and hold the setting button for 2 seconds 3. When a pop-up window appears on the phone screen, click to confirm the connection. 4. How to check the battery status 1. When the earphones are connected to the mobile phone, you can check the battery level of the earphones and charging box in the pop-up window on the mobile phone screen. 2,
Instructions for accessing and using the payment function of UniApp
Jul 04, 2023 am 10:27 AM
Instructions for accessing and using the payment function of UniApp. With the popularity of mobile payment, many applications need to integrate payment functions to facilitate users to make online payments. As a cross-platform development framework based on Vue.js, UniApp has the characteristics of one-time development and multi-platform use, and can easily implement the payment function. This article will introduce how to access the payment function in UniApp and give code examples. 1. To access the payment function, add payment permissions in the manifest.json file on the App side:
Is Render coin worth holding for the long term? Is Render Coin worth investing in?
Mar 06, 2024 am 08:31 AM
Render Coin: An investment opportunity worthy of long-term holding Render Coin is a cryptocurrency based on the Ethereum blockchain and is designed to pay for rendering services on the decentralized rendering network Render. The goal is to address the high cost and inefficiency of traditional rendering solutions and provide artists and creators with an affordable and convenient rendering option. The advantage of Render coin is decentralization: Render coin is based on the Ethereum blockchain and has decentralized characteristics, avoiding the single point of failure and high costs of centralized rendering service providers. High efficiency: Render coins use distributed rendering technology to allocate rendering tasks to idle GPUs around the world, greatly improving rendering efficiency. Low cost: Render coin reduces the cost of rendering by eliminating the middleman.
How to use the video recording function in uniapp
Jul 06, 2023 pm 06:51 PM
How to use the video recording function in uniapp Today, the author will introduce to you how to use the video recording function in the uniapp development framework. uniapp is a cross-platform development framework. We can run our applications on multiple platforms at the same time based on the code written once, which is very convenient for developers. In uniapp, we can use the uni-AD-IN camera component to implement the video recording function. First, we need to install uni-
