如何在 Vue.js 中使用 v-if 隐藏 Card 元素

Question

当我select select 框的第三个元素时，如何隐藏卡片？谁能帮我解决这个问题。我是新开发者，我很抱歉。

<b-form-select 
        v-model="InputRatingPlate.RatingPlateTemplate"
        class="mb-0 input_with_appended_unit2"
        label-cols-lg="6"
              >
          <option>
            UK-Double Voltage
          </option>
          <option>
            ORCHESTRA
          </option>
          <option>
            VESTAS
          </option>
          </b-form-select>
      </b-form-group>
<b-card class="electric-card" 
   v-if=""
 >

Answer 1

像下面的片段一样尝试：

new Vue({
  el: '#demo',
  data() {
    return {
      options: ['UK-Double Voltage', 'ORCHESTRA', 'VESTAS'],
      InputRatingPlate: {
        RatingPlateTemplate: ''
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
  <b-form-group>
    <b-form-select v-model="InputRatingPlate.RatingPlateTemplate">
        <option v-for="(opt , i) in options" :key="i">
          {{ opt }}
        </option>
      </b-form-select>
    </b-form-group>
  <b-card v-if="InputRatingPlate.RatingPlateTemplate !== options[2]">
    card
  </b-card>
</div>

如何在 Vue.js 中使用 v-if 隐藏 Card 元素

How can I hide Card element with v-if in Vue.js

javascript

vue.js

vuejs2