如何使用 if-else 作为小胡子语法？答案

【问题标题】：How to use if-else as mustache grammar?如何使用 if-else 作为小胡子语法？
【发布时间】：2021-11-10 08:55:13
【问题描述】：

读完这篇文章后，我尝试了 Vue.js 中的文章，但它只发出了错误。

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

如果我只写{{data.authority}}，那么效果很好。

Vue.js 中如何使用 if-else 作为小胡子语法？

【问题讨论】：

发生了什么错误？
编译模板时出错：invalid expression: Unexpected identifier in _s(#data.authority==1)+"Admin"+_s(/data.authority==1) Raw expression: {{#data.authority==1}}Admin{{/data.authority==1}}

【解决方案1】：

Vue 使用带有小胡子语法的插值，其工作方式与您分享的帖子不同。您在 {{}} 中编写的任何内容都会被 JavaScript 评估。

所以，你可以写任何类型的表达式：

{{ 2 + 2 }} // output will be 4
{{ 'Hell World' }} // output: 'Hello World'

所以，在你的情况下，你可以写一个三元运算符：

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

如果您只想在 user.authority === 1 时显示 td 元素，则应使用 v-if 或 v-show 代替。

您可以在 {{}} 中使用表达式而不是语句。所以一个简单的 if/else 是行不通的。

【讨论】：

【解决方案2】：

就像小胡子里面的香草js： {{ data.auth ? 'user' : 'guest'}}

【讨论】：