使用Switch语句在Aurelia中隐藏div

2024-05-19 • 问答

如何使用switch语句隐藏div。以下是我要执行的操作，但是它将隐藏所有true或false的div。

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;
  }
}

condition最终将是上次调用typeOfGreeting时设置的值。

一种执行所需操作的方法是在对象中返回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

caindeck 回答：使用Switch语句在Aurelia中隐藏div

大家都在问