javascript - 当 vue js radio 改变时执行 Action

Question

根据我想做哪个radio，div会打开，另一个会关闭。我想不通。我是 vuejs 和 stackoverflow 的新手。提前致谢。

<div class="col-sm-3 d-flex border-light">
        <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio3" @change="onChange($event)" value="1" checked>
        <label class="form-check-label" for="inlineRadio3"><b> YELLOW</b></label>
    </div>
    <div class="col-sm-3 d-flex border-light">
        <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio4" @change="onChange($event)" value="2">
        <label class="form-check-label" for="inlineRadio4"><b> BLUE</b></label>
    </div>


<div>YELLOW</div>
<div>BLUE</div>

export default {
    data() {
        return {
            show: true,
            
        }
    },
    methods: {
        onChange(event) {
            var data = event.target.value;

        }
    }

}

Answer 1

在模板中，您使用值 @change="onChange(false)" 调用方法如果数据显示为真或假，则显示 div v-if="show"在方法中，您设置数据显示取决于单击的单选按钮 this.show = color类似于以下代码段:

new Vue({
  el: '#app',
    data() {
        return {
            show: true,
        }
    },
    methods: {
        onChange(color) {
            this.show = color
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="col-sm-3 d-flex border-light">
        <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio3" @change="onChange(true)" value="1" checked>
        <label class="form-check-label" for="inlineRadio3"><b> YELLOW</b></label>
    </div>
    <div class="col-sm-3 d-flex border-light">
        <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio4" @change="onChange(false)" value="2">
        <label class="form-check-label" for="inlineRadio4"><b> BLUE</b></label>
    </div>
  <div v-if="show">YELLOW</div>
  <div v-if="!show">BLUE</div>
</div>