求教vue2怎么用createElement动态创建DOM

Question

有一个按钮，根据 status 的值来创建，比如 status = 1 ,按钮名为 status1,跳转 A 页面

我想通过 createElemetn 来创建这个按钮

<template>

<div class="btn">...</div>

</template>

<script>

    export default{

        render:(createElement){

          return createElement(...按钮)  

        }

    }

</script>

我看了官网的介绍，好像是这样写，但是试了下没有用，不知道怎么玩了...

Answer 1

<template><order-btn :status="status"></order-btn></template><script>import Vue from 'vue'Vue.component('order-btn', {&nbsp; render:function(createElement){&nbsp; &nbsp; &nbsp; let self = this&nbsp; &nbsp; &nbsp; &nbsp; return createElement(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'div',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; on:{click:function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('success')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.order2Operate(self.status)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; },&nbsp; &nbsp; props:{&nbsp; &nbsp; &nbsp; &nbsp; status&nbsp; &nbsp; },&nbsp; &nbsp; methods:{&nbsp; &nbsp; &nbsp; &nbsp; order2Operate(status){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch(status){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 1:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return "待付款"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 2:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return "待成团"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 3:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return "待发货"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 4:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return "待收货"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 5:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return "待评价"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return "***"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }})export default{&nbsp; &nbsp; data(){&nbsp; &nbsp; &nbsp; &nbsp; return{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; statue:[1,2,3,4,5]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; }}</script>