<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>