点击按钮文字局部页面切换

兔子岛航标员

已于 2022-04-26 11:45:44 修改

阅读量1k

点赞数 5

分类专栏： vue 文章标签： vue.js

于 2022-04-26 11:28:01 首次发布

本文链接：https://blog.csdn.net/Edward______/article/details/124422538

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML：

<!--样式一（文字）-->
<div>
    <div :class="{text1 :radioButton,text :!radioButton}" @click="one()" >页面一</div>  &nbsp;&nbsp;
    <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
}