v-for指令
介绍:
可以用 v-for
指令基于一个数组来渲染一个列表。
以前没用到vue的时候我们拿到后台传过来的json数据,大都是用这种方法遍历渲染到页面的:
<div id="app"></div>
<script> $.ajax({ type:'GET', data:{}, dataType:'json', success:function(data){ console.log(data);
var table = ""; for(i in data){ '..................' '...................' }
$("#app").html(table); } }) </script>
引号里面是一大推的样式和DOM节点,极容易出错,并且书写十分麻烦。
那么vue的列表渲染就很好的解决了这个问题,我们来看一下v-for是如何渲染出相同效果的,以官网实例为例:
这里面的items就可以当做后台接收过来的json数据,item可以随便命名,message就是json数据里面的各种名称,例如:
id,name,age...
然后通过item.message就可以将json数据全部遍历出来,并且各种样式也不用改变,是不是非常方便呢。
您的批评是对我最大的鼓励,欢迎指正。