vue render函数

by 苹果熊

HTML

<div id="app">
  <input type="text" v-model="msg">
  <p>{{msg}}</p>
  <xdemo></xdemo>
</div>

CSS

.on {
  color: red
}

JavaScript

var vm = new Vue({
	el: '#app',
  data: {
  	msg: ''
  },
  components: {
  	xdemo: {
    	data() {
      	return {
        	tag: Math.random()
        }
      },
    	render(createElement) {
      	return createElement(this.getTag() , {
        	'class': {
          	on: this.tag > .5 ? true : false
          },
          on: {
          	click(event) {
            	console.log(event.target)
            }
          }
        }, [...Array(10)].map((v, k) => createElement('p', k)))
      },
      methods: {
      	getTag() {
        	return this.tag > .5 ? 'h1' : 'h2'
        }
      }
    }
  },
  watch: {
  	msg(newV, oldV) {
    	console.log(newV, oldV)
    }
  }
})