javascript - V-bind等级多种选择

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

您可以使用十元运算符通过单个内联表达式来完成此操作:

<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">