在进行数据绑定的时候，可能会考虑这个问题：如果数据是数组怎么办？
这里介绍vue的模版引擎的特点，允许在数据渲染的时候，加入一些复杂的运算逻辑。
vue的流程控制语法只有2个：“for循环” 和 “if判断”。
条件判断
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue 测试实例</title> <script src="res/vue.js"></script> </head> <body> <div id="app"> <!--如果需要频繁显示隐藏，那么直接使用show--> <h5 v-show="ok">Hello!</h5> <h5 v-show="false">Hello!</h5> <!--if...else--> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else> Not A/B </div> </div> <script> new Vue({ el: '#app', data: { ok: true, type: 'C' } }) </script> </body> </html>
循环控制
使用v-for语句可以实现数组和对象属性的遍历。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="res/vue.js"></script> </head> <body> <div id="app"> <ul> <!--遍历数组--> <template v-for="item in list"> <li>{{ item.name }}</li> </template> <br/> <!--遍历数组--> <template v-for="item in [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' }]"> <li>{{ item.name }}</li> </template> <br/> <!--遍历对象属性--> <template v-for="(value, key) in map"> <li>{{key}} : {{value}}</li> </template> <br/> <!--简单地实现while循环--> <template v-for="n in 10">{{n}}</template> </ul> </div> <script> new Vue({ el: '#app', data: { list: [ {name: 'Runoob'}, {name: 'Google'}, {name: 'Taobao'} ], map: { name: 'xiaoming', age: '30' } } }) </script> </body> </html>
不仅仅在vue上，其它的模版引擎也会具备类似的语法，下面是layui的模版语法，大家可以根据自己熟悉的，去类比学习。
<script id="demo" type="text/html">
<h3>{{ d.title }}</h3>
<ul>
{{# layui.each(d.list, function(index, item){ }}
<li>
<span>{{ item.modname }}</span>
</li>
{{# }); }}
{{# if(d.list.length === 0){ }}
无数据
{{# } }}
</ul>
</script>