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: {&nbsp; addNewCard: {&nbsp; &nbsp; get: function () {&nbsp; &nbsp; &nbsp; return this.selected === 'A'&nbsp; &nbsp; }&nbsp; }}现在，如果值为 ，则为 true;如果值为 ，则为 false。addNewCardAB可以在此处阅读有关计算属性的详细信息

Answer 2

&nbsp;<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b-form-group label="Payment Options">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b-form-radio v-model="selected" name="some-radios" value="A">Continue payment using the card **** **** ****</b-form-radio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b-form-radio v-model="selected" name="some-radios" value="B">Add new Card</b-form-radio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </b-form-group>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div v-if="addNewCard">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ............&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div><script>&nbsp;data() {&nbsp; &nbsp;selected: ""&nbsp;&nbsp;&nbsp;},&nbsp;computed: {&nbsp; &nbsp;addNewCart() {&nbsp; &nbsp; return this.selected === "A"&nbsp; &nbsp;&nbsp; &nbsp;}&nbsp;&nbsp;}</script>这现在应该有效。