Day19_10_Vue教程之v-for

Vue教程之v-for 一.循环遍历语句

• v-for

二.HTML

    

        {{ item.message }}
    

注：items 是源数据数组并且 item 是数组元素迭代的别名。是不是像极了 Thymeleaf

三.JavaScript

    var vm = new Vue({
        el: '#vue',
        data: {
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    });

四.测试效果

• 在 Chrome 浏览器上运行，并按 F12 进入 开发者工具

• 在控制台输入 vm.items.push({message: 'Baz'}) ，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条 Baz

五.完整的 HTML

    
    语法篇 v-for
    




    

        {{ item.message }}
    



    var vm = new Vue({
        el: '#vue',
        data: {
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    });