Vue.js的点点滴滴（三）

Vue.js指令总结：

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 Javascript 表达式；

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue指令总结如下：

1. v-if

如果，用于有条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy值的时候被渲染；

比如：hello world

v-else

与v-if配套使用，使用v-else指令来表示v-if的“else块”，它必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。

比如：

0.5">Now you see me

Now you don't

v-else-if

充当v-if的“else-if块”，可以联系使用，它也必须紧跟在带v-if或者v-else-if的元素之后。

比如：

A

B

C

Not A/B/C

实例代码1：

 0">
count 大于0， 当前count的值是：{{count}}

 -5">
count 介于0和-5之间


count的值是：{{count}}



show: {{count}}
{{msg}}

实例代码2：

{{item}}

   
{{item1.name}} -- {{item1.age}}



 30">

{{item2.name}}， 你老了，你个老男人


{{item2.name}}，你老了，你个老阿姨



{{item2.name}},{{item2.age}}岁，好年轻





{{item3.name}}-{{item3.age}}-{{item3.sex}}

2. v-show

用于根据条件展示元素的内容，带有v-show的元素始终会被渲染并保留在DOM中，

v-show只是简单地切换元素的CSS属性display,其属性值为none||block;

v-show不支持