vue 点击按钮显示/隐藏文本动态显示

最新推荐文章于 2024-09-09 08:44:40 发布

Liu_liu57

最新推荐文章于 2024-09-09 08:44:40 发布

阅读量1w

点赞数 5

分类专栏： vue 文章标签： vue点击按钮 vue文本动态 vue显示隐藏 vue 按钮切换 vue切换文本

本文链接：https://blog.csdn.net/Liu_liu57/article/details/88580354

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue 点击按钮显示/隐藏文本动态显示

<template>
	 <div>
        <button v-text="btnText" @click="showToggle"></button>
        <div v-show="isShow">要显示与隐藏的内容块</div>
    </div>
</template>

<script>
	export default {
	  data () {
	      return {
	          isShow: true,
	          btnText: "隐藏",
	      }
       },
	   methods:{
            showToggle(){
                this.isShow = !this.isShow
                if(this.isShow){
                    this.btnText = "隐藏"
                }else{
                    this.btnText = "显示"
                }
            }
        }
</script>