如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示。实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当show属性为true就设置为false,为false就设置为true(this.show = !this.show)即可。

vue实现点击隐藏与显示实例分享 

1、新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。

代码:

<div id="app">

<button >点击隐藏再点显示</button>

<div>hello world</div>

</div>

vue实现点击隐藏与显示实例分享

2、引入vue.js。在body结束标签前面使用<sctipt>引入vue.js文件。

vue实现点击隐藏与显示实例分享

3、为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签,然后创建vue的挂载点。

js代码:

<script>

var app = new Vue({

el:"#app",

})

</script>

vue实现点击隐藏与显示实例分享

4、使用data创建一个show属性,设置默认值为true;

使用metheds创建一个点击事件(showCont),该事件处理当show值为true就修改给false,当show为false就修改为true。

代码:

data:{

show:true

},

methods:{

showCont:function(){

this.show = !this.show;

}

}

vue实现点击隐藏与显示实例分享

5、添加显示隐藏功能。在按钮标签上添加点击事件showCont,在按钮标签后的div标签上使用v-if添加show属性。

代码:

<button @click="showCont">点击隐藏再点显示</button>

<div v-if="show">hello world</div>

vue实现点击隐藏与显示实例分享

6、保存html代码,然后使用浏览器打开,点击按钮会发现按钮后面的文字隐藏了,再次点击按钮隐藏的内容又显示出来。

vue实现点击隐藏与显示实例分享

vue实现点击隐藏与显示实例分享

7、所有代码。可以直接复制所有代码,粘贴到新建html文件后,修改引入的vue.js路径保存后使用浏览器打开即可看到效果。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><button @click="showCont">点击隐藏再点显示</button><div v-if="show">hello world</div></div><script type="text/javascript" src="/UploadFiles/2021-04-02/vue.js">
标签:
vue,点击隐藏

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“vue实现点击隐藏与显示实例分享”
暂无“vue实现点击隐藏与显示实例分享”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。