1.条件判断
- v-if：用于条件判断的指令。
需求：v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
<div id='app'> <p v-if="seen">现在可以被看到</p> </div> var vm = new Vue({ el: '#app', data:{ seen: false } })
- v-else：可以用 v-else 指令给 v-if 添加一个 “else” 块。
随机生成一个数字，判断是否大于0.5，然后输出对应信息。
<div v-if="Math.random() > 0.5"> 大于 0.5 </div> <div v-else> 不大于 0.5 </div>
- v-else-if：用作 v-if 的 else-if 块。可以链式的多次使用。
<div id='app'> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else> Not A/B </div> </div> var vm = new Vue({ el: '#app', data:{ type: 'C' } })
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if 之后。
- v-show：根据条件展示元素。
<div id='app'> <p v-show='ok'>Hello vue!</p> </div> var vm = new Vue({ el: '#app', data:{ ok: true } })
2、v-if 与 v-show 的区别
v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。
v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if较好。
3. 循环语句
循环使用 v-for指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
- v-for 可以绑定数据到数组来渲染一个列表。
<div id='app'> <ol> <li v-for="site in sites"> {{site.name}} </li> </ol> </div> var vm = new Vue({ el: '#app', data:{ sites: [ {name: '张三'}, {name: '李四'}, {name: '王五'}, ] } })
- 模板中使用 v-for
<div id='app'> <ul> <template v-for="site in sites"> <li>{{site.name}}</li> <li>------</li> </template> </ul> </div>
- v-for 迭代对象：v-for 可以通过一个对象的属性来迭代数据
<div id='app'> <ul> <li v-for="value in object"> {{value}} </li> </ul> </div> var vm = new Vue({ el: '#app', data:{ object: { name: '菜鸟', url: 'http://www.xxx.com', slogan: '学的不仅是技术，更是梦想！' } } })
- v-for 迭代对象：也可以提供第二个的参数为键名
<li v-for="(value, key) in object"> {{key}} : {{value}} </li>
- v-for 迭代对象：也可以提供第三个的参数为索引
<li v-for="(value, key, index) in object"> {{index}} : {{key}} : {{value}} </li>
- v-for 迭代对象：也可以循环整数
// 输出1-10 <div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>
不积跬步无以至千里 不积小流无以成江海
