vue.js将插值值传递给属性(类)绑定方法

Question

我正在创建一个使用v动态生成按钮的列表。我希望按钮改变颜色，这取决于按钮实体是否包含在应用程序状态对象的数组中。(我正在使用vuetify，这就是为什么按钮对象是v的原因)

<span v-for="x in ['A','B','C','D','E','F','G','H']">
  <v-btn small elevation-10 :color="xIsSelected('{{x}}')?'blue':'purple'" @click="toggleX('{{x}}')" >{{x}}</v-btn>
</span>

toggleX是一种从状态数组中添加或移除x值的方法；xIsSelected是一种根据x是否在状态数组中返回true或false的方法。

方法调用正在起作用:我可以从开发人员工具中调用它们，如果我硬编码按钮和带有数组值的方法调用，它也能工作。问题是，{{x}的内插值没有传递到方法调用中，而是传递文字“{{x}”。我试过使用类语法，但无法理解引号、双引号和倒计时。

Answer 1

要传递x，只需编写：

:color="xIsSelected(x) ? 'blue' : 'purple'"

与v-bind绑定的属性(或简称:)已经是JavaScript表达式，它们可以直接访问x。没有必要在该表达式中引入任何其他形式的模板或插值。