【发布时间】：2018-10-19 05:44:57
【问题描述】：
我将一个“类型”道具传递给我的组件以用作 BEM 修饰符。
<div class="badge badge--{{this.$props.type}}">
但是，当我尝试连接类时出现错误。我如何做到这一点？
【问题讨论】：
标签： properties vuejs2 vue-component classname
【发布时间】：2018-10-19 05:44:57
【问题描述】：
更简洁的方法是创建一个computed property：
computed: {
badgeClasses() {
return `badge badge--${this.type}`;
},
},
然后将它绑定到你的 HTML 中：
<div :class="badgeClasses">
但是你也可以像你尝试的那样只绑定属性，但是使用反引号而不是简单的引号：
<div class="`badge badge--${type}`">
【讨论】：
-
谢谢，计算是默认选择，但我认为可能有一种直接连接的快速方法。另一种方式很丑陋，所以会被计算出来。
-
另请注意，您的 HTML 中不需要
this.$props，因为数据、计算的属性和道具已经在当前上下文中。