如何在Vue.js中使用Mustache语法的if-else条件判断？

Vue 的双大括号插值语法仅支持单行 JavaScript 表达式，不支持原生 Mustache 的块级判断语法{{#条件}}内容{{/条件}}，这也是你直接这么写会报错的核心原因。

正确实现方案 #

下面是几种常用的实现方式，可根据你的业务场景选择：

• 1. 三元表达式（适合简单二分支判断）
     直接在插值语法内写三元逻辑即可，你的需求可以这么写：

<tr v-for="(data, i) in userList" :key="i">
  <td>{{ data.authority === 1 ? 'Admin' : '' }}</td>
</tr>

如果是需要展示其他身份，把后面的空字符串替换成对应内容即可。

• 2. v-if / v-else 指令（适合多分支、多元素渲染场景）
     如果判断分支多，或者需要在不同条件下渲染不同的DOM结构，用Vue内置的条件指令即可：

<tr v-for="(data, i) in userList" :key="i">
  <td>
    <span v-if="data.authority === 1">Admin</span>
    <span v-else-if="data.authority === 2">运营人员</span>
    <span v-else>普通用户</span>
  </td>
</tr>

• 3. 计算属性/方法封装（适合复杂逻辑场景）
     如果判断逻辑非常复杂，建议把逻辑放到组件的计算属性或者方法里处理，模板代码会更易维护：

// 计算属性示例
computed: {
  formattedUserList() {
    return this.userList.map(item => {
      let roleText = '普通用户'
      switch(item.authority) {
        case 1: 
          roleText = 'Admin'
          break
        case 2:
          roleText = '运营人员'
          break
        case 3:
          roleText = '财务人员'
          break
      }
      return { ...item, roleText }
    })
  }
}

模板直接用处理后的数据即可：

<tr v-for="(data, i) in formattedUserList" :key="i">
  <td>{{ data.roleText }}</td>
</tr>

内容的提问来源于stack exchange，提问作者niddddddfier