vue v-show指令的使用示例

本文介绍了Vue.js中v-show指令的基本用法及实例应用。通过布尔值控制元素的显示与隐藏,实现动态展示信息的目的。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前写了几个基本的指令的用法,这一次来看看 v-show 的使用,


先看看常规的使用规则:

<div style="width:300px; height:100px; border:1px solid red;">
<p v-show="true">v-show的使用 true显示</p>
<p v-show="false">v-show的使用 false不显示</p>
</div>


也就是说 v-show 后面的是布尔值,如果布尔值是true  ,  那么这个段落显示出来;

如果布尔值是false,那么就不会显示出来;


上面是语法,下面看一个实际使用的例子:

假设我们有一个事件记录的功能,当事件列表为空时,显示:“未添加任何任务”,

                                                   当添加了事件之后,“未添加任何任务”不显示;

那么我们这么写:


<span v-show="!info.length">未添加任何任务</span>


info是我们放置添加的事件的数组:

var info=[
{title:"成功的路上并不拥挤"},
{title:"坚持的人并不多"},
{title:"hold on !"}
];


当  info.length等于0时,表明我们的info中没有事件,那么显示上面的提示;

当  info.length等于0时,!info.length等于true,也就是 v-for=“true”,显示提示;


这就是v-for的实际使用方式,通过数据驱动显示,vue的特点;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值