vue.js列表渲染

Question

怎么使用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"}]

Answer 1

http://codepen.io/limichange/pen/KzQBVX

Answer 2

http://jsfiddle.net/ygjack/mz1wk9ee/

Answer 3

首先引用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>

Answer 4

http://cn.vuejs.org/guide/list.html