今天我来搞搞这个v-show,看看它到底是个啥玩意儿。
我先是找些资料看看,大概知道v-show是用来控制东西显示或者不显示的。跟那个v-if有点像,但又不太一样。
我琢磨着,这玩意儿到底咋用?于是我打开我的编辑器,准备上手试试。
我先写个简单的HTML结构:
小编温馨提醒:本站只提供游戏介绍,下载游戏推荐89游戏,89游戏提供真人恋爱/绅士游戏/3A单机游戏大全,点我立即前往》》》绅士游戏下载专区
<div>
<p v-show="isShow"> 你好呀! </p>
<button @click="toggleShow"> 切换显示/隐藏 </button>
</div>
看到没,我用个 v-show="isShow" ,这个isShow就是关键,它决定这段文字“你好呀!”到底显不显示。然后我又搞个按钮,点一下就能让isShow变个样。
我在JavaScript里写点代码:
data() {
return {
isShow: true
methods: {
toggleShow() {
* = !*
这里我定义一个isShow,一开始让它是true,就是显示。然后在methods里写个toggleShow函数,每次点击按钮,就让isShow反过来,true变false,false变true。
保存,运行!
果然可以!页面上显示着“你好呀!”,我点一下按钮,字儿没,再点一下,又出来。
我打开开发者工具,瞅瞅,发现用v-show的时候,那个<p>标签还在那里,只不过是加个 style="display: none;",原来是这么回事儿!
我又试试v-if,发现它更狠,直接把整个<p>标签都给干掉,不显示的时候,连个影子都找不着。
我算是明白,v-show就是障眼法,东西还在那儿,只不过给你藏起来。v-if,就是直接把东西搬走,眼不见心不烦。
以后用哪个,就看具体情况。如果只是想简单地切换一下显示不显示,而且这个东西以后还可能用到,那就用v-show。如果这个东西显示完就没用,或者切换不频繁,那就用v-if,省点事儿。