vue能动态生成html标签吗？

霍流根 2019-10-11 09:00:27

我现在在开发一个项目，里面有个需求就是当点击一个按钮时，在vue的根元素里动态添加一个自定义的组件标签。详情看以下代码。

这是我定义的子组件
//静态文本类控件从基类控件继承
var staticComponent = {
extends: baseComponent, //继承基类控件
data () {
return {
styleObject: {
fontSize: 60 + 'px',
fontWeight: 'bold',
fontStyle: 'italic',
},
contentObj: {
content: '123'
}
}
},
props: ['pro1'],
template: `<div :style="styleObject" :pro="styleObject.fontSize">{{contentObj.content}}</div>`,
mounted () {
console.log('staticComponent mounted');
}
};
Vue.component("slabel", staticComponent);

root = initRoot('root', 'root', staticComponent);
}

这是根组件
function initRoot(name, el, obj) {
var root = new Vue({
name: name,
el: "#" + el,
//components: {
// slabel: obj
//},
data: {
showfontsize:true ,
showfontweight: null,
showfontstyle: null,
showcolor: null,
showbackimg: null,
showackgroundcolor: null,
showindex: null,
showtop: null,
showleft: null,
showradius: null
},
mounted() {
console.log('root级组件实例化'); //根级组件已挂载
console.dir(this.$children);
}
});
return root;
}

根组件对应的根元素为：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8"/>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/vue.js"></script>
<script src="VueControl.js"></script>
</head>
<body>
<div id="root">

</div>
</body>
</html>

当我在<div id="root">

</div>中加入自定义组件标签是可以正常显示组件的

<div id="root">
<slabel></slabel>
</div>

当需要一个按钮事件来动态添加<slabel></slabel>标签，貌似<slabel></slabel>无法自动解析为对应的模版.

按钮事件:
function addcomponent()
{
$('#root').append('<slabel></slabel>');
}

请问有什么办法能动态添加<slabel></slabel>标签，并成功解析？

...全文

1684 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

霍流根 2019-10-11

打赏
举报

slabel是后期动态添加上去的，楼上这样写不起作用

cn00439805 2019-10-11

打赏
举报


<slabel v-if="isShow"></slabel>

Hello World, 2019-10-11

打赏
举报

动态添加组件
参考2

NANU-NANA 2019-10-11

打赏
举报

v-for + dynamic component


Vue.config.productionTip = false

Vue.component('card1', {
  template: '<div>Card:<span style="background-color:green">{{title}}</span></div>',
  props: ['title']
})

Vue.component('card2', {
  template: '<div>Card:<span style="background-color:blue">{{title}}</span></div>',
  props: ['title']
})

Vue.component('card3', {
  template: '<div>Card:<span style="background-color:yellow">{{title}}</span></div>',
  props: ['title']
})

new Vue({
  el: '#app',
  data() {
    return {
      cards: [
        {'card': {'title': 'I am one card1'}, 'card-type':'card1'},
        {'card': {'title': 'I am one card2'}, 'card-type':'card2'}
      ]
    }
  },
  computed: {
    computedNoCard1: function () {
      let availableCards = new Set(['card2', 'card3'])
      return this.cards.filter((item) => {
        return availableCards.has(item['card-type'])
      })
    }
  },
  methods: {
    addCard: function () {
      let supportedCards = ['card1', 'card2', 'card3']
      let seed = Math.floor(Math.random()*supportedCards.length)
      this.cards.push({'card': {'title': 'I am new card for ' + supportedCards[seed]}, 'card-type': supportedCards[seed]})
    }
  }
})


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<button @click="addCard()">Add Card</button>
  <table>
  <tr><th>Data Property</th><th>Computed Property</th></tr>
  <tr>
  <td>
    <div v-for="(card, index) in cards" :key="index">
      <component  :is="card['card-type']" :title="card.card.title">
      </component>
    </div>
  </td>
  <td>
    <div v-for="(card, index) in computedNoCard1" :key="index">
      <component  :is="card['card-type']" :title="card.card.title">
      </component>
    </div>
  </td>
  </table>
  
</div>