javascript - VueJS 2 值绑定(bind)中的条件渲染

Question

我只是尝试让 VueJS 2 渲染内联条件，同时向 dom 元素添加值。我知道，可以使用 v-if让元素根据条件出现或消失，但如何使用内联条件？

我举个例子。下面的 html 描述了我的想法 并且我知道这行代码会产生错误。两者<span>元素由让它们出现或不出现的条件控制，这工作得很好。

现在，我尝试将一个值绑定(bind)到 href属性取决于条件(例如在括号中)。

<div id="vuemain">
<span v-if="diced < 6">Looser</span>
<span v-if="diced == 6">Winner</span>
<a :href="'https://link-to-whatever.com/'+{diced==6 : 'winner', diced<6 : 'looser'} ">LINK</a>
</div>

所以在 VueJS 渲染之后 <a>标签应该是这样的:

<a href="https://link-to-whatever.com/winner"> <!-- If diced == 6 -->

或者

<a href="https://link-to-whatever.com/looser"> <!-- If diced < 6 -->

你明白我的问题是什么吗？这有可能吗？

提前非常感谢

艾伦

Answer 1

这应该有效。

<a :href="'https://link-to-whatever.com/'+ (diced==6 ? 'winner' : 'looser')">LINK</a>

看起来您正在尝试使用对象语法，但在这种情况下这实际上不起作用。相反，只需使用上面的三元即可。