利用click事件和v-show实现点击切换

目标：利用click点击事件和v-show实现点击图片和文字的切换。

初始：

 实现的效果：点击最右侧出现如下展示效果，再次点击恢复上图效果

 实现方法：

template中：

<div class="resultType ">
                        <span class="resultTypeTitle">我的偶像</span>
                        <span class="paintWord" v-show="isShowPaintWordOne">
                            我的偶像是千玺
                        </span>
                        <span
                            class="paintWordFinish"
                            v-show="isShowPaintWordFinishOne"
                        >
                            偶像最棒&nbsp;&nbsp;&nbsp;√
                        </span>
                        <img
                            src="./theme/img/editWhite.png"
                            @click="finishPaintOne"
                            v-show="isShowPaintWordOne"
                        />
                        <img
                            src="./theme/img/editBlue.png"
                            @click="finishPaintRecoverOne"
                            v-show="isShowPaintWordFinishOne"
</div>

script的data中：

isShowPaintWordOne: true,
isShowPaintWordFinishOne: false,

script的methods中：

finishPaintOne() {
            this.isShowPaintWordOne = false;
            this.isShowPaintWordFinishOne = true;
        },
finishPaintRecoverOne() {
            this.isShowPaintWordOne = true;
            this.isShowPaintWordFinishOne = false;
        },

样式css:

.resultType {
                width: 361px;
                height: 41px;
                background-color: #242e3a;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                border-bottom: 1px solid #1a446a;
                .resultTypeTitle {
                    flex-basis: 100px;
                    justify-content: center;
                    font-size: 12px;
                    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                    font-weight: 500;
                    text-align: left;
                    color: #b0d9ff;
                    padding-left: 20px;
                }
                .paintWord {
                    opacity: 0.3;
                    font-size: 12px;
                    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                    font-weight: 400;
                    text-align: left;
                    color: #ffffff;
                    width: 214px;
                }
                .paintWordFinish {
                    font-size: 12px;
                    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                    font-weight: 400;
                    text-align: left;
                    color: #7effbe;
                    width: 214px;
                }
}

这样就实现了利用click点击事件和v-show实现点击图片和文字的切换。

标签：Sans,Han,show,Source,点击,font,click,CN
来源： https://blog.csdn.net/weixin_43312391/article/details/121384559