Question

是否可以将HTML标记（元素）绑定到Vue 2中的数据或属性的值？

我尝试了不同的语法但无法正常工作，谷歌搜索没有帮助。

以下是我尝试过的两种语法：

直接'字符串'插值：

<{{ someProp ? 'button' : 'a' }}>
    <!-- Some complex template I want to keep DRY -->
</{{ someProp ? 'button' : 'a' }}>

对模板元素上的标签进行v-bind（有希望的猜测）：

<template :tag="someProp ? 'button' : 'a'">
    <!-- Some complex template I want to keep DRY -->
</template >

如果不可能，我怎样才能避免重复元素的内容和属性只是为了更改关联的HTML标记？我想避免的是：

<button v-if="someProp" /* Some attribute bindings */>
    <!-- Some complex template I want to keep DRY -->
</button>
<a v-else /* Repeating the above attribute bindings */>
    <!-- Repeating the above template, breaking the DRY principle -->
</a>

Answer 1

Vue中的动态component标记旨在与Vue组件一起使用，但它也适用于HTML标记。

<component :is="tag">Click me</component>

这是一个例子。

console.clear()


new Vue({
  el:"#app",
  data:{
    tag: "a",
  },
  methods:{
    onClick(){
      alert('clicked')
    },
    changeTag(){
      this.tag = this.tag == "a" ? "button" : "a"
    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <component :is="tag" @click="onClick" href="javascript:void(0)">Click me</component>

  <hr>
  <button @click="changeTag">Change tag</button>
</div>

将HTML标记绑定到数据或道具

1 个答案: