值绑定中的 VueJS 2 条件渲染

Question

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

我举个例子。以下 html 描述了我的想法 我知道这行会产生错误。 <span> 两个元素都由允许它们出现或不出现的条件控制，这很好用。

现在，我尝试根据条件（例如，在括号中）将值绑定到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>

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