使用 Switch 语句在 Aurelia 中隐藏 div

Question

如何使用 switch 语句隐藏 div。以下是我正在尝试做的，但它会隐藏所有 divs 是真还是假。

home.html

<template>
<div repeat.for="color of colors">
   <div show.bind="condition">
      ${TypeOfGreeting(color)}
   </div>
<div>
</template>

home.js

export class Home {
condition;
  TypeOfGreeting(color) {
    let text = ""
    switch (color) {
      case "white":
        text = "good morning!";
        condition = true;
        break;
      case "black":
        text = "good night!";
        condition = true;
        break;
      case "orange":
        text = "good evening!";
        condition = true;
        break;
      case "red":
        condition = false;
        break;
      case "blue":
        condition = false;
        break;
      default:
        condition = false;
        text = "Error!";
    }
    return text;
  }
}

Answer 1

condition 将最终成为上次调用 typeOfGreeting.

时设置的值

做你想做的事情的一种方法是 return 对象中的 text 和 condition（result 在我的代码中）。

查看我的 GistRun：https://gist.run/?id=91735851acd180eab2156e218c213668

app.html

<template>
  <div repeat.for="color of colors">
     <div show.bind="typeOfGreeting(color).result">
        ${typeOfGreeting(color).text}
     </div>
  <div>
</template>

app.js

export class App {
  colors = ['white', 'black', 'orange', 'red', 'blue'];

  typeOfGreeting (color) {
    let result;
    let text = ""

    switch (color) {
      case "white":
        text = "good morning!";
        result = true;
        break;

      case "black":
        text = "good night!";
        result = true;
        break;

      case "orange":
        text = "good evening!";
        result = true;
        break;

      case "red":
        result = false;
        break;

      case "blue":
        result = false;
        break;

      default:
        result = false;
        text = "Error!";
    }

    return {text, result};
  }
}

使用 Switch 语句在 Aurelia 中隐藏 div

Hide div in Aurelia with Switch statement

javascript

aurelia