Vuejs：根据是否选中单选按钮更改 boolean 变量

Question

我需要根据条件 v-if="addNewCard" 显示一个 div。 只有当它是真的我需要显示 div。 最初将 addNewCard 的值设置为 false。 当用户单击单选按钮 - 添加新卡时，我需要将其设为 true 以便显示 div，但如果用户单击另一个单选按钮，则应将变量设为 false 隐藏 div。 我怎样才能做到这一点。 如果它不需要在点击时调用 function 就可以工作，那就太好了。

            addNewCard: false

            <div>
                <b-form-group label="Payment Options">
                    <b-form-radio v-model="selected" name="some-radios" value="A">Continue payment using the card **** **** ****</b-form-radio>
                    <b-form-radio v-model="selected" name="some-radios" value="B">Add new Card</b-form-radio>
                </b-form-group>
            </div>
            <div v-if="addNewCard">
                  ............  
            </div>

Answer 1

在这里使用计算方法：

computed: {
  addNewCard: {
    get: function () {
      return this.selected === 'A'
    }
  }
}

现在您的addNewCard如果值为A ，则为 true ，如果值为B ，则为 false 。

您可以在此处阅读有关计算属性的更多信息

Answer 2

  <div>
                <b-form-group label="Payment Options">
                    <b-form-radio v-model="selected" name="some-radios" value="A">Continue payment using the card **** **** ****</b-form-radio>
                    <b-form-radio v-model="selected" name="some-radios" value="B">Add new Card</b-form-radio>
                </b-form-group>
            </div>
            <div v-if="addNewCard">
                  ............  
            </div>


<script>
 data() {
   selected: ""  
 },
 computed: {
   addNewCart() {
    return this.selected === "A"   
   } 
 }
</script>

现在应该可以了。