Question

我试图根据三个可能的输入变量之一给出一个元素中的一个。我的vue.js代码

<input type='text' class='inputwordtext' v-bind:class="[{(wordupload.firstchoice.selected == 'Zinnenlijst') : wordlongwidth}, {(wordupload.firstchoice.selected != 'Zinnenlijst') : wordshortwidth}]">

如果wordupload.firstchoice.selected == Zinnenlijst它应该得到wordlongwidth类，否则它应该得到类wordshortwidth，怎么能这样做？

Answer 1

您可以使用tenary运算符使用单个内联表达式执行此操作：

<input 
  type='text' 
  class='inputwordtext'
  :class="wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth'"
>

但是，使它成为计算属性会更具可读性：

computed: {
  inputClass() {
    let selected = this.wordupload.firstchoice.selected;
    return (selected === 'Zinnenlijst') ? 'wordlongwidth' : 'wordshortwidth';
  }
}

然后在模板中引用该计算属性：

<input type='text' class='inputwordtext' :class="inputClass">

Answer 2

vue.js文档建议使用三元表达式并将v-bind:class与常规class结合使用，如下所示：

<input type='text' :class="[wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth', 'inputwordtext']">

要了解他们在哪里谈论这个并了解更多关于课程绑定的信息，请查看他们的文档：

https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

您可以了解有关三元表达式的更多信息，请查看此来源：

https://www.w3schools.com/js/js_comparisons.asp

V-bind类有多个选项

2 个答案: