Question

我有这个问题要解决。我有一个下拉菜单，该段落仅应显示为第一个和第二个选项。现在，通过按钮或复选框很容易做到。如何通过下拉菜单做到这一点。

我创建了一个代码笔用于演示。 https://codepen.io/anon/pen/LKYZox。我知道该段应该绑定到值，但是执行起来很困难。

 <div id="app">
 <v-app id="inspire">
   <v-layout row wrap>
  <v-flex xs3>
        <v-select :items="items">
   </v-select>
    </v-flex> 
   <span class="title text-xs-center">How to Show This paragraph for First 
and Second Item only</span>
  </v-layout>  
  </v-app>
 </div>


  new Vue({
 el: '#app',
 data(){
   return{
    items: [
    'Item1',
    "Item2",
    "Item3",
      "Item4"
    ]
  }
 }
})

谢谢。

Answer 1

因此，您需要将v-select的选定值绑定到某些数据。在下面的示例中，我使用了v-model，数据称为item。

<div id="app">
  <v-app id="inspire">
    <v-layout row wrap>
      <v-flex xs3>
         <!-- Added a v-model here -->
         <v-select :items="items" v-model="item"></v-select>
      </v-flex> 
      <!-- Added a v-if here -->
      <span
        v-if="['Item1', 'Item2'].includes(item)"
        class="title text-xs-center"
      >
        How to Show This paragraph for First and Second Item only
      </span>
    </v-layout>  
  </v-app>
</div>

new Vue({
  el: '#app',
  data(){
    return{
      item: 'Item2', // <- This is new
      items: [
        'Item1',
        "Item2",
        "Item3",
        "Item4"
      ]
    }
  }
})

您不必将item的初始值设置为'Item2'，但必须在该行中创建反应性数据属性。如果您不希望最初选择任何项目，则可以使用null。

v-if的确切编写方式将取决于您的方案的具体情况。例如，如果要按索引检查前两个项目，则可能为v-if="[0, 1].includes(items.indexOf(item))"。如果-1没问题，则可以简化为v-if="items.indexOf(item) < 2"。如果实际情况比较复杂，则可能需要将v-if表达式移到计算属性中。

有条件地在Vuejs中隐藏段落吗？

1 个答案: