Day19_10_Vue教程之v-for

向右看齐 2024-02-19 21:42 47阅读 0赞

## Vue教程之v-for ##

### 一.循环遍历语句 ###

*  `v-for`

### 二.HTML ###

<div id="vue">
        <li v-for="item in items">
            {
       { item.message }}
        </li>
    </div>

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

### 三.JavaScript ###

<script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            data: {
                items: [
                    {message: 'Foo'},
                    {message: 'Bar'}
                ]
            }
        });
    </script>

### 四.测试效果 ###

*  在 `Chrome` 浏览器上运行，并按 `F12` 进入 `开发者工具`
 *  在控制台输入 `vm.items.push({message: 'Baz'})` ，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条 `Baz`  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5YzAwMDY2Ng_size_16_color_FFFFFF_t_70][]

### 五.完整的 HTML ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>语法篇 v-for</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
    
    <div id="vue">
        <li v-for="item in items">
            {
       { item.message }}
        </li>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            data: {
                items: [
                    {message: 'Foo'},
                    {message: 'Bar'}
                ]
            }
        });
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5YzAwMDY2Ng_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cb997fd3515a465f8bc574cf79e1f707.png

发表评论取消回复

表情：

评论列表（有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

相关 Day19_10_Vue教程之v-for

Vue教程之v-for 一.循环遍历语句 `v-for` 二.HTML <div id="vue"> <li v-for="i

向右看齐/ 2024年02月19日 21:42/ 0 赞/ 48 阅读

相关 Day19_09_Vue教程之v-on

Vue教程之v-on 一.监听事件 `v-on` 二. HTML <div id="vue"> <button v-on:cl

傷城~/ 2024年02月19日 21:42/ 0 赞/ 48 阅读

相关 Day19_07_Vue教程之Vue表单输入

Vue教程之Vue表单输入一.什么是双向数据绑定 Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的

淩亂°似流年/ 2024年02月19日 21:40/ 0 赞/ 47 阅读

相关 Day19_08_Vue教程之v-else-if

Vue教程之v-else-if 一.连续的条件判断语句 `v-if` `v-else-if` `v-else` 二.HTML <d

Myth丶恋晨/ 2024年02月19日 21:40/ 0 赞/ 45 阅读

相关 Day19_06_Vue教程之Vue实例的生命周期

Vue教程之Vue实例的生命周期一.什么是生命周期 Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载

怼烎@/ 2024年02月19日 21:40/ 0 赞/ 56 阅读

相关 Day19_04_Vue教程之环境搭建

Vue教程之环境搭建一.安装node.js（[https://nodejs.org/en/）][https_nodejs.org_en] ![watermark_

我就是我/ 2024年02月19日 21:39/ 0 赞/ 53 阅读

相关 Day19_05_Vue教程之第一个Vue应用程序

Vue教程之第一个Vue应用程序一.兼容性 Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持

雨点打透心脏的1/2处/ 2024年02月19日 21:39/ 0 赞/ 57 阅读

相关 Day19_03_Vue教程之Vue简介

Vue教程之Vue简介一.简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架

梦里梦外;/ 2024年02月19日 21:39/ 0 赞/ 45 阅读

相关 Day19_02_Vue教程之MVVM模式

MVVM模式一.什么是 MVVM? MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以前就是

谁践踏了优雅/ 2024年02月19日 21:39/ 0 赞/ 65 阅读

相关 1910博客地址

第一组： [黄栋炜][Link 1] [林世垚][Link 2] [雷智超][Link 3] [石东顺][Link 4] 第二组： [陈延钊][Link 5]

灰太狼/ 2022年12月01日 03:38/ 0 赞/ 240 阅读