Maison > interface Web > js tutoriel > Explication détaillée des composants dynamiques et du rendu basé sur vue2.0

Explication détaillée des composants dynamiques et du rendu basé sur vue2.0

亚连
Libérer: 2018-05-29 16:28:20
original
1547 Les gens l'ont consulté

Ci-dessous, je partagerai avec vous une explication détaillée des composants dynamiques et du rendu basé sur vue2.0. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Comme indiqué ci-dessous :

<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 &#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 v-for="item in items">{{ 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>
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. avenir.

Articles connexes :

Explication détaillée de l'extension ElTableColumn de VUE dans element-ui

Comment renvoyer la page de partage de l'applet WeChat à l'exemple de la page d'accueil

Utilisation de l'expression el en js et méthode de jugement non vide

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal