怎么使用vue.js把json对象遍历成下面的列表
<ul>
<li>
<i class="icon iconfont icon-1"></i>
<div class="logo"></div>
<p>小黄人</p>
</li>
<li>
<i class="icon iconfont icon-2"></i>
<div class="logo"></div>
<p>李四</p>
</li>
<li>
<i class="icon iconfont icon-3"></i>
<div class="logo"></div>
<p>王二</p>
</li>
<li>
<i>4</i>
<div class="logo"></div>
<p>麻子</p>
</li>
</ul>
这是json数据[{"logo":"\/image\/1.jpg","name":"\u5c0f\u9ec4\u4eba"},{"logo":"\/image\/2.jpg","name":"\u674e\u56db"},{"logo":"\/image\/2.jpg","name":"\u738b\u4e8c"},{"logo":"\/image\/2.jpg","name":"\u9ebb\u5b50"}]
http://jsfiddle.net/ygjack/mz1wk9ee/
http://cn.vuejs.org/guide/list.html
首先引用vue框架,script引入即可
再给json对象命名,方法是将
[{"logo":"\/image\/1.jpg","name":"\u5c0f\u9ec4\u4eba"},{"logo":"\/image\/2.jpg","name":"\u674e\u56db"},{"logo":"\/image\/2.jpg","name":"\u738b\u4e8c"},{"logo":"\/image\/2.jpg","name":"\u9ebb\u5b50"}]
改成
{items:[{"logo":"\/image\/1.jpg","name":"\u5c0f\u9ec4\u4eba"},{"logo":"\/image\/2.jpg","name":"\u674e\u56db"},{"logo":"\/image\/2.jpg","name":"\u738b\u4e8c"},{"logo":"\/image\/2.jpg","name":"\u9ebb\u5b50"}]}
实现命名
如果你的json表现形式是一个字符串的话请转成json对象
用eval('(' + 你的json字符串 + ')');转换即可
然后用vue的v-for列表渲染
<ul id="list">
<li v-for="item in items">
<i class="icon iconfont icon-1"></i>
<div class="logo">{{item.logo}}</div>
<p>{{item.name}}</p>
</li>
</ul>
vue脚本部分
<script type="text/javascript">
new Vue({
el: '#list',
data: 你的json
})
</script>
http://codepen.io/limichange/pen/KzQBVX