Question

我知道我可以使用VueJS创建自定义组件，并为这些组件添加自定义道具。我想知道的是，是否可以在常规html标签中添加自定义道具。

例如，让我们想象以下内容：

<a button="round" color="red">A Red Round Button</a>

我希望如下呈现：

<a class="red round button">A Red Round Button</a>

是否可以使用Vue执行此操作？如果是这样，怎么样？

感谢。

Answer 1

我认为一个组件坦率地说更容易，但你可以编写一些指令。

Vue.directive("button",function(el, binding){
  el.classList.add("button", binding.value);
})

Vue.directive("color", function(el, binding){
  el.classList.add(binding.value)
})

用法

<a v-button="'round'" v-color="'red'">Click me</a>

这是组件版本。

Vue.component("mybutton",{
  props:["button", "color"],
  template:`<a class="button" :class="[button, color]"><slot></slot></a>`
})

用法

<mybutton button="round" color="red">Click me</mybutton>

渲染

<a class="button round red">Click me</a>

Example of both.

我可以使用VueJS将标题添加到标准HTML标签吗？

1 个答案: