vue如何实现点击隐藏与显示

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

操作方法

  • 01

    新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。 代码: <div id="app"> <button >点击隐藏再点显示</button> <div>hello world</div> </div>

  • 02

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

  • 03

    为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签,然后创建vue的挂载点。 js代码: <script> var app = new Vue({ el:"#app", }) </script>

  • 04

    使用data创建一个show属性,设置默认值为true; 使用metheds创建一个点击事件(showCont),该事件处理当show值为true就修改给false,当show为false就修改为true。 代码: data:{ show:true }, methods:{ showCont:function(){ this.show = !this.show; } }

  • 05

    添加显示隐藏功能。在按钮标签上添加点击事件showCont,在按钮标签后的div标签上使用v-if添加show属性。 代码: <button @click="showCont">点击隐藏再点显示</button> <div v-if="show">hello world</div>

  • 06

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

  • 07

    所有代码。可以直接复制所有代码,粘贴到新建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="js/vue.js" ></script> <script> var app = new Vue({ el:"#app", data:{ show:true }, methods:{ showCont:function(){ this.show = !this.show; } } }) </script> </body> </html>

(0)

相关推荐

  • jquery的toggle实现点击按钮时显示/隐藏图片

    下面是使用html+css+jquery来完成点击按钮时显示/隐藏图片的功能,主要用到了jquery中的一个toggle()方法. 操作方法 01 首先创建一个html文件,然后在body下创建一个d ...

  • word字体隐藏功能如何隐藏及显示文字

    一、word2003隐藏及显示字体 我们打开word2003,进入到操作界面,然后将你的文档打开,选中你需要隐藏不需要的打印的文字,然后点击菜单栏上的“格式--字体”,在字体的对话框下面“效果”上面勾 ...

  • Excel中如何隐藏或显示行和列?

    隐藏/取消隐藏行/列的方法如下: 方法一: 第一,打开需要隐藏行或者是列的excel表格 第二,如果是要隐藏行的话,就先选中该行,如图中所示 第三,在excel顶部找到并点击格式,在格式的下拉菜单中找 ...

  • xcel2013怎样隐藏与显示状态栏

    excel 2013隐藏与显示状态栏的教程: 隐藏与显示状态栏步骤1:打开EXCEL2010工作表,工作表标签名"电脑统计表",可以看到,底部状态栏没有显示出来! 隐藏与显示状态栏 ...

  • Excel2010怎么隐藏工作表?Excel2010隐藏和显示工作表教程

    在excel操作中,我们为了数据分析,把原始数据隐藏,把做好的数据给领导看,这样避免领导看不清楚到底要看哪个表格,直接呈现做好的数据,那么我们怎么隐藏和显示表格呢? Excel2010隐藏和显示表格教 ...

  • Excel如何批量隐藏及显示批注呢?

    Excel如何批量隐藏批注?如何批量显示批注?方法很简单,快来学习一下吧. 步骤 1.首先打开excel表格,先随机添加一些批注. 2.点击开始中的查找和选择,找到选择窗格. 3.出现窗格对话框,包括 ...

  • excel怎么一键隐藏/取消隐藏分级显示数据?

    我们在编辑表格时,如果不想显示某些行或列可以设置隐藏行或列,需要查看时再取消隐藏.每一次隐藏或显示都需要对表格的行或列选中,多次反复操作,很麻烦.其实我们可以有更好的办法,可以一键隐藏,也可以一键取消 ...

  • excel如何让表格全部隐藏或显示?

    在使用而excel的过程中,有时候为了让表格更加便于管理和查看,会使用到隐藏这一功能,但是,如果隐藏的内容一旦多了,显示隐藏就会显得非常麻烦,那么应该如何操作,才能让表格全部显示隐藏呢?下面小编就为大 ...

  • PPT怎么隐藏幻灯片? ppt幻灯片的隐藏域显示方法

    ppt幻灯片是可以设置隐藏的,该怎么设置呢?下面我们就来看看ppt幻灯片设置隐藏的教程. 1.以下是示例幻灯片,共五页(如图): 2.如果将第2页和第3也隐藏,首先选中这两页-点击第2页然后按住ctr ...