验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

vue隐藏元素的指令是什么

阅读:1100 来源:乙速云 作者:代码code

vue隐藏元素的指令是什么

vue中隐藏元素的指令是“v-show”。v-show指令根据表达式的真假,来决定一个元素显示或者隐藏,语法为“v-show="表达式"”。v-show指令是通过改变元素的css display属性来控制元素的显示和隐藏状态,指令后面表达式的内容最终都会解析为布尔值,值为真(true)的时候元素显示,值为假(false)的时候元素隐藏。

Vue.js 提供了一个 v-show 指令,它根据后面表达式的真假,来决定一个元素显示或者隐藏。

v-show 指令是通过改变元素的 css 的 display 属性,控制元素的显示和隐藏状态。

v-show 指令介绍

v-show 指令的后面,需要跟着一个布尔变量或者布尔表达式,当值为 true 时显示元素,当值为 false 时隐藏元素。

<标签 v-show="true/false">


示例:


    Vue 课程

当 flag 设置为 '隐藏' 时,就不会显示 “Vue 课程”;当 flag 设置为 '显示' 时,就会显示 “Vue 课程”。

实际上,当 flag 设置为 '隐藏' 时,p 元素的 css 属性 display 被设置为 none,所以元素就被隐藏了。

渲染后的代码如下:

Vue 课程

v-show 代码举例

如下是html、 js 代码举例



	
		
		
		v-show指令
	
	
		
			
			不装了,我摊牌了,没错你要找的就是我

cdn.jsdelivr.net/npm/vue/dist/vue.js">

渲染后代码如下

不装了,我摊牌了,没错你要找的就是我

代码的运行结果如下所示:

vue隐藏元素的指令是什么

分享到:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: hlamps#outlook.com (#换成@)。
相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>