如何添加更多的变量js vue

Question

下面的代码

methods: {
switch (typwik) {
  case 'T':
    console.log('<span class="ui green label"><i class="check icon"></i>TOMATO!</span>');
    break;
  case 'N':
    console.log('<span class="ui red label"><i class="x icon"></i>NASA!</span>');
    break;
  case 'U':
    console.log('<span class="ui red label"><i class="x icon"></i>UGANDA!</span>');
    break;
}
}

如何更改此代码以使其在输入两个以上的值后仍能正常工作，例如：如果我键入 T，它将显示“Tomato”，如果我键入 N，它将显示“NASA”，如果我键入 U，则它将显示“乌干达”。目前它只适用于两个变量，如果我输入 T 它会显示一些东西，如果我输入 T 以外的东西它会显示不同的选项。

Answer 1

你已经很接近了，你只需要结合你的两次尝试。在第一个中，您根据结果查看 value 和 return。在第二个你使用 switch 但你没有返回任何东西。

typwik: function(value) {
  switch (value) {
    case 'T':
      return '<span class="ui green label"><i class="check icon"></i>TOMATO!</span>';
    case 'N':
      return '<span class="ui red label"><i class="x icon"></i>NASA!</span>';
    case 'U':
      return '<span class="ui red label"><i class="x icon"></i>UGANDA!</span>';
  }
},

Answer 2

您可以将计算的属性与对象一起使用，如下所示：

const names = {
    A: "Awesome",
    T: "Tomato",
    N: "Nasa",
};

var search = 'T';

return names[search] || 'Not found';

看看我做的这个功能示例：https://codesandbox.io/s/xenodochial-butterfly-xsc67i?file=/src/App.vue:286-372

这种方式更容易维护，更干净，而不是使用开关盒；

如何添加更多的变量js vue

How to add more variables js vue

html

javascript

variables

vue.js