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

Question

我需要根据条件显示一个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>

Answer 1

在此处使用计算方法：

computed: {

  addNewCard: {

    get: function () {

      return this.selected === 'A'

    }

  }

}

现在，如果值为 ，则为 true;如果值为 ，则为 false。addNewCardAB

可以在此处阅读有关计算属性的详细信息

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>

这现在应该有效。