时间戳

首页 > 解决方案 > Vue - 添加道具作为 Bem 修饰符

properties - Vue - 添加道具作为 Bem 修饰符

问题描述

我将一个“类型”道具传递给我的组件以用作 BEM 修改器。

 <div class="badge badge--{{this.$props.type}}">

但是，当我尝试连接该类时，出现错误。我如何实现这一目标？

标签： propertiesvuejs2vue-componentclassname

解决方案

一种更简洁的方法是创建一个computed property：

computed: {
  badgeClasses() {
    return `badge badge--${this.type}`;  
  },
},

然后将其绑定到您的 HTML 中：

<div :class="badgeClasses">

但是您也可以像您尝试的那样绑定属性，但使用反引号而不是简单的引号：

<div class="`badge badge--${type}`">

推荐阅读