vue v-show指令的使用示例
之前写了几个基本的指令的用法,这一次来看看 v-show 的使用,先看看常规的使用规则:<div style="width:300px; height:100px; border:1px solid red;"><p v-show="true">v-show的使用true显示</p&
·
之前写了几个基本的指令的用法,这一次来看看 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的特点;
更多推荐
已为社区贡献11条内容
所有评论(0)