同样的，我们先来回顾一下昨天学习的内容：
1.利用v-once来组织双向绑定
2.filter｛｝过滤器的使用（详情请看上一章）
3.computed（计算属性），利用computed属性实现filters同样的效果
4.利用method{}来实现与computed和filters同样的效果
5.比较filters、computed、method的区别
6.利用v-bind{}属性绑定HTML自带属性；如class,style等
7.v-bind{}属性绑定HTML自带属性的三种写法------对象，数组，数组+对象
8.vue会自动为类似于 border-radius,transform等需要加浏览器前缀的属性自动加上前缀
好了，回顾完昨天所学习的东西，那么我们进入今天的进程：：：：：
我想js中的 show(),hide()属性，大家一定已经耳熟能详，没错，这两组属性在我们的开发中运用得很多很多，那么我们来看一下，在Vue中，我们如何实现这两组属性吗，上代码：
<div v-if="ok">Ok</div> <div v-else>No</div> //以上代码详解： 1.值得注意的是v-else必须要紧接在v-if后面才会生效。 2.意思很明显，如果v-if的值为ok，那么输出Ok；如果v-if的值不为ok 那么输出No 如果我们把上面的代码更加语义化的写出来，那么就会是这样： <div v-if="ok"></div> <div v-if="!ok"></div> 同时，还有另一种表象相同但本质不同的写法： <div v-show="ok">Ok</div> <div v-else>No</div> v-show其实和v-if的效果是一样的，只不过v-show不会渲染dom，而仅仅是改变css中display的属性而已；所以如果，我们把v-show="ok"换成v-show="false"的话，浏览器只会将其隐藏而不会删除节点。 值得注意的是，在新版本中v-show这种写法不支持 complate和v-else。 重点：所以通过上面的介绍，就可以得出这样一个结论；即为 1.v-if需要渲染dom，因此在切换速度上会比v-show慢; 2.而v-show的dom需要预先加载，因此初次加载量比v-if大; 所以，如果需要频繁切换则采用v-show；如果需要提升整个页面的加载速度则采用v-if。 以上只是开胃菜，蔬菜沙拉？水果沙拉？？？无所谓了，下面我们进入正题： v-for:: 我们知道对于任何变成语言来说，数据集合的循环处理其实都是最常用的功能，那么我们来看看vue的基本写法： <div > <div v-for="item in items"> {{ message }} </div> </div> var example2 = new Vue({ el:' #example ', data{ items[ { message : ' foo ' } { message : ' bar ' } ] } }) 上面的输出结果为： foo , bar ; 同样，我们也可以写成比较像js原生语法的方式： <div id =" example "> <div v-for=" item of items "> {{message}} </div> </div> 上面提到的是最基本的v-for语法 其实Vue中的v-for和PHP中的foreach没有太大的区别；代码如下： foreach( $x as $index => $y ){} 这个里面 $index 和 $y为一个键值对。 如： $x = array( 1,2,3,4,5 ) 那么 $index 依次是 0 1 2 3 4 $y依次是 1 2 3 4 5 这种写法，我们在Vue里可以这样写： var example2 = new Vue({ el:'#example', data{ parentMessage : ' parent ', items{ [ { message : ' zoo ' }, { message : ' bar ' } ] } }) <div id = "example"> <div v-for=" ( item, index ) in items "> {{ parentMessage }} - {{ index }} - {{ item.message }} </div> </div> 那么我猜测上面输出的结果应该是： parent - 0 - zoo parent - 1 - bar 上面我们讲到了利用v-for来循环数组，那么我们同样还可以用v-for来循环对象，代码如下： <div id= " example "> <div v-for= " value in object "> {{ value }} </div> </div> new Vue({ el: ' #example ', data { object : { FirstName : ' mc ' LastName : ' mcc ' Age : ' 20 ' } } }) 以上将会输出 ： mc mcc 20；；；； 一个疑问，如果说我们把上面代码中的 value替换为key，那么将会输出什么呢？ ？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？ 毫无疑问，输出依然是不变的，至于为什么，后面将会提到。 可以看出Vue的写法简洁易懂， 既可以循环集合，又可以内部属性，所以在用Vue的v-for循环的时候，要注意不要搞混了，完整循环代码如下： <div id = "example"> <div v-for = " ( index key value ) in object"> {{value}}.{{index}}:{{key}} </div> 代码如上，输出的结果应该是： 0.FirstName:mc 1.LastName:mcc 2.Age:20 ！！注： 在v-for属性当中，循环的第一个参数，也就是上面的index为 object中的 值 循环的第二个参数，也就是上面的 key 为 object中的 键 循环的第三个参数，也就是上面的value 为object中的 数组下标 那么某些时候，我们只需要循环次数而不需要循环数据，也就是空数据，那么我们可以这样。。。 <div v-for=" n in 10 "> {{ n }} </div> 那么打印出来的结果就应该是 ：： 12345678910今天我们就到这里，祝大家周末愉快，明天见~~~~~~
希望各位看官，可以留下自己的见解，希望可以向大家学习；
不管是有疑问、质疑等都可以留言发表，希望可以和大家一起讨论，共同进步
