列表渲染:Vue Template v-for

2018年05月18日 15:12 | 3140次浏览 作者原创 版权保护

如同 v-if 模板,你也可以用带有v-for<template> 标签来渲染多个元素块。

<!DOCTYPE html>
<html>
<head>
    <title>Vue条件--V型知识库www.vxzsk.com</title>
</head>
<body>
    <div id="app">
        <template v-for="(fruit,index) in fruits">
            <h1>{{fruit}}({{index}})</h1>
            <hr>
        </template>
    </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/925.html   转载请注明出处!谢谢!

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