列表渲染:Vue 对象迭代-v-for

2018年05月19日 09:29 | 2975次浏览 作者原创 版权保护

v-for 通过一个对象的属性来迭代,同时支持当前项的索引。

<!DOCTYPE html>
<html>
<head>
    <title>Vue条件--V型知识库www.vxzsk.com</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="web in website">
                <div v-for="(value, key, index) in web">{{key}}:{{value}}({{index}})</div>
            </li>
        </ul>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                fruits:['香蕉','苹果','芒果','火龙果'],
                website:[
                    {name: '百度' , url: 'http://www.baidu.com'},
                    {name: '晚黎' , url: 'http://www.iwanli.me'},
                    {name: 'Google' , url: 'http://www.google.com'},
                ]
            },
        });
    </script>
</body>
</html>



小说《我是全球混乱的源头》
此文章本站原创,地址 https://www.vxzsk.com/926.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程