vue.js 中v-for,v-if,v-show指令的理解和简单使用

1 v-for指令

作用：循环数据并渲染；将一个数组遍历或枚举一个对象循环显示时候，常用的就是列表渲染。
下面是一些简单的应用：
1：可以绑定数据到数组来渲染一个列表

结果：

上图中：value和index分别表示数据data中listd 每一个元素和索引，:key = "value"表示元素值唯一。

2：可以通过一个对象的属性来迭代数据

结果：

上图中，通过一个对象obj来迭代数据。从而渲染到页面，value， index，key 分别表示数据对象的值，索引和键 。

3：可以迭代循环整数

结果：

上图中，通过一个整数迭代数据。从而渲染到页面，n表示0到10的整数。

2 v-if指令

作用：条件判断并渲染

结果：

上图中，v-if， v-else-if，v-else-if，v-else做判断，当条件为真时，渲染内容。

3 v-show指令

作用：类似于v-if，都可以动态控制dom元素显示隐藏，当条件为真时，显示，否则隐藏。

结果：

即grade是40， 小于60 条件成立，渲染元素内容。
其中： 与v-if不同的是：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还存在。