vue.js - 如何替换 Vuejs 中的标签元素？

Question

我在 Vuejs 工作。如何将标签替换div为button标签？

在 DOM 中，

<div class="prev">prev</div>
<div class="next">next</div>

我想做这样的

<button class="prev">prev</button >
<button class="next">next</button >

请帮忙。

标签： vue.js

Answer 1

您可以使用动态组件component（doc）

const app = new Vue({
  el: '#app',
  data: {
    tagName: 'div'
  },
  methods: {
    toggle(tagName) {
      this.tagName = tagName
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <component :is="tagName" class="prev">Prev</component>
  <br/>
  <component :is="tagName" class="next">Next</component>
  <br/>
  <button @click="toggle('div')">Change To Div</button>
  <button @click="toggle('button')">Change To Button</button>
</div>