实现功能如下,点击否显示div,点击是隐藏div
代码如下:
<template>
<!-- 实现点击是隐藏div 点击否显示div效果 -->
<div>
<!-- 给两个单选按钮加上change改变事件 -->
<el-radio v-model="radio" label="1" @change="changeColor">是</el-radio>
<el-radio v-model="radio" label="2" @change="changeColor">否</el-radio>
<!-- 对下面的盒子加一个v-if 给一个值 并且在data中定义一下初始状态 -->
<div class="box" v-if="radios">
</div>
</div>
</template>
<script>
export default {
data() {
return {
radios : false,
radio: "1",
};
},
methods:{
//当触发change事件的时候 先随便传一个参数 这个参数是选中的 Radio label 值
changeColor(param){
console.log(param)
//判断label值为2,也就是否时候隐藏
if(param === '2'){
this.radios = true
} else {
this.radios = false
}
}
}
};
</script>
<style lang="scss" scoped>
.box{
width: 200px;
height: 200px;
background: #f56;
}
</style>