vue v-show指令的使用示例

之前写了几个基本的指令的用法，这一次来看看 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的特点；