19-template转render写法

<div id="app">

<ele></ele>

</div>

<script>

Vue.component('ele',{

template:`<div id="element" :class="{show:show}" @click="handleClick">文本内容</div>`,

data(){

return{

show:true

}

},

methods:{

handleClick(){

console.log("clicked")

}

}

});

var app = new Vue({

el:"#app"

})使用render修改后：

<div id="app">

<ele></ele>

</div>

<script>

Vue.component("ele",{

render:function(createElement){

return createElement{

"div",

{

//动态绑定class，同:class

class:{

"show":this.show

},

//普通HTML特性

attrs:{

id:"element"

},

//给div绑定click事件

on:{

click:this.handleClick

}

},

"文本内容"

}

}，

data(){

return{

show:true

}

},

methods:{

handleClick(){

console.log("clicked")

}

}

})

转载于:https://www.cnblogs.com/Romantic-Blood/p/11140427.html