最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - vue.js - dynamic html tag (using variable) - Stack Overflow

programmeradmin3浏览0评论

I was wondering if there was any way to dynamically set the tags of an html element. E.g.

var element = "ol";

<{element}> some content </{element}>

I was wondering if there was any way to dynamically set the tags of an html element. E.g.

var element = "ol";

<{element}> some content </{element}>
Share Improve this question asked Oct 17, 2017 at 4:31 A. LA. L 12.7k29 gold badges98 silver badges179 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

Easier method is to just use ponent element, like this:

<ponent :is="elType">...</ponent>

Just set elType in data to whatever type of element you want it to be (ie div, h1 etc)

Demo: https://codesandbox.io/s/strange-kapitsa-zbtok?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

You may want to look into Render Function, jsx is also supported in Vue.js2.
Here's a simple example.

var element = 'ol'

Vue.ponent('custom', {
  render: function (createElement) {
    return createElement(
      element,
      this.$slots.default
    )
  },
})

new Vue({
  el: "#app"
})
<script src="https://unpkg./vue/dist/vue.js"></script>
<div id="app">
  <custom>abc</custom>
</div>

发布评论

评论列表(0)

  1. 暂无评论