如何正确编写带条件判断的v-bind表达式？

你报错的原因是v-bind指令内部不需要嵌套插值语法{{}}——v-bind本身就支持直接写入JavaScript表达式，套{{}}会被识别成无效的语法结构。

正确的写法有两种：

1. 直接在v-bind中使用三元表达式 #

可以直接把三元表达式写在指令的引号里，也可以用v-bind的简写形式:data-sorted：

<!-- 完整写法 -->
v-bind:data-sorted="sorted ? '1' : '0'"

<!-- 简写形式（更常用） -->
:data-sorted="sorted ? '1' : '0'"

2. 用计算属性拆分逻辑（适合复杂场景） #

如果后续逻辑可能变复杂，建议把判断逻辑放到计算属性里，让模板更简洁：

// 在Vue组件的computed选项中定义
computed: {
  sortedStatus() {
    return this.sorted ? '1' : '0';
  }
}

然后在模板中直接引用：

:data-sorted="sortedStatus"

内容的提问来源于stack exchange，提问作者Вячеслав Предеин