Aurelia - 根据选择选项显示/隐藏元素

Question

如何隐藏在div类，如果在选择选项选择的值是美元？

应用程序.html

<select name="" id="" class="form-control" value.bind=""> 
      <option repeat.for="option of Options" model.bind="option.value">
           ${option.name} 
      </option>
</select>

<div class="row">
  <!-- enter code here -->
</div>

应用程序

export class Test {
    Option = [
      { value: 'usd', name: 'america'},
      { value: 'cad', name: 'canada money'}
    ];

}

Answer 1

我同意 Rajkumar 的观点，你真的应该付出更多努力来解决这个问题。 您甚至没有基本选择的代码，其代码遍布互联网，例如： https : //ilikekillnerds.com/2015/10/working-with-forms-in-aurelia/

也就是说，我会尝试帮助：

<template>
<form role="form">
    <select value.bind="selectedVal">
        <option repeat.for="option of someOptions"
             model.bind="option">${option.name}</option>
    </select>
</form>
</template>

<div class="row" show.bind="selectedVal === 'usd'">
  UsD SeLeCtEd
</div>

<div class="row" show.bind="selectedVal !== 'usd'">
  Other SeLeCtEd
</div>

当您选择美元时，上面应该只显示“已选择美元”的内容，当您选择其他任何内容时，应显示“其他已选择”的内容。 这不是最好的方法，但应该有效。