HTML:
<!--样式一(文字)-->
<div>
<div :class="{text1 :radioButton,text :!radioButton}" @click="one()" >页面一</div>
<div :class="{text1 :!radioButton,text :radioButton}" @click="two()" >页面二</div>
</div>
<!--这里用的是文字,也可以换成按钮,换成按钮就不需要
:class="{s1 :radioButton,text1 :!radioButton}
进行判断选择样式了,
按钮不需要function-->
<!--样式二(按钮)-->
<div class = "butt">
<el-radio-group v-model="radioButton" size="medium" >
<el-radio-button :label="true" >页面一</el-radio-button>
<el-radio-button :label="false">页面二</el-radio-button>
</el-radio-group>
</div>
<div>
<div style="height: 70%" v-show="radioButton">
<h1>这是页面一</h1>
</div>
<div v-show="!radioButton">
<h1>这是页面二</h1>
</div>
</div>
function:
methods: {
one(){
this.radioButton= true
},
two(){
this.radioButton= false
},
}
data:
data() {
return {
radioButton:true,
}
}
css:
/*(文字样式)text 未选中时,text1 选中时*/
.text{
width: 100px;
height: 35px;
color: rgb(158,152,152);
font-size: 1.8rem;
cursor: pointer;
}
.text1{
width: 100px;
height: 35px;
font-size: 2rem;
cursor: pointer;
color: rgb(255, 255, 255);
}
/*(按钮样式)*/
.butt{
height: 50px;
width: 200px;
margin-left: 20px
}