Javascript Vuejs：根据是否选中单选按钮更改布尔变量

我需要根据条件显示div，v-if=“addNewCard”。只有当它为真时，我才需要显示div。初始设置addNewCard的值为false。当用户单击单选按钮-添加新卡时，我需要将其设置为true，以便显示div，但是如果用户单击另一个单选按钮，则变量应设置为false以隐藏div。如何实现这一点。如果它可以在不需要单击调用函数的情况下工作，那就太好了

            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>

addNewCard:false
继续使用******卡付款****
添加新卡
............  

在此处使用计算方法：

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

现在，如果值为

A

，则您的

addNewCard

为true；如果值为

B

，则为false

您可以阅读有关

继续使用******卡付款****
添加新卡
............  
数据（）{
选定：“”
},
计算：{
addNewCart（）{
返回此项。所选==“A”
} 
}

现在应该可以了

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