有条件地在Vuejs中隐藏一个段落？答案

【问题标题】：Conditionally hide a paragraph in Vuejs?有条件地在Vuejs中隐藏一个段落？
【发布时间】：2019-06-11 02:45:57
【问题描述】：

我想解决这个问题。我有一个下拉菜单，该段落应该只显示第一个和第二个选项。现在很容易通过按钮或复选框来完成。我如何通过下拉菜单实现它。

我创建了一个代码笔用于演示目的。 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"
    ]
  }
 }
})

提前谢谢你。

【问题讨论】：

标签： vuejs2

【解决方案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 表达式移到计算属性中。

【讨论】：