v-for的列表渲染

news/2024/7/10 0:57:18 标签: vue

v-for的列表渲染

image-20201215095246658

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>v-for的列表渲染</title>
    </head>
    <body>
        <div id="app">
            <div>
                <ul>
                    <li v-for='item in menus'>
                        <h3>id:{{item.id}} 名字：{{item.name}}</h3>
                    </li>
                </ul>
            </div>
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    menus:[
                        {id:1,name:'科比'},
                        {id:2,name:'乔丹'},
                        {id:3,name:'詹姆斯'},
                        {id:4,name:'杜兰特'}
                    ]
                },
            })
        </script>
    </body>
    </html>

image-20201215100151185

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>v-for的列表渲染</title>
    </head>
    <body>
        <div id="app">
            <div>
                <ul>
                    <li v-for='(item,index) in menus'>
                        <h3>{{index}} - id:{{item.id}} 名字：{{item.name}}</h3>
                    </li>
                </ul>
            </div>
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    menus:[
                        {id:1,name:'科比'},
                        {id:2,name:'乔丹'},
                        {id:3,name:'詹姆斯'},
                        {id:4,name:'杜兰特'}
                    ]
                },
            })
        </script>
    </body>
    </html>

image-20201215100329995

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>v-for的列表渲染</title>
    </head>
    <body>
        <div id="app">
            <div>
                <ul>
                    <li v-for='(item,index) in menus'>
                        <h3>{{index}} - id:{{item.id}} 名字：{{item.name}}</h3>
                    </li>
                </ul>
                <ol>
                    <li v-for="(val,key) in obj">
                        {{val}}----{{key}}
                    </li>
                </ol>
            </div>
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    menus:[
                        {id:1,name:'科比'},
                        {id:2,name:'乔丹'},
                        {id:3,name:'詹姆斯'},
                        {id:4,name:'杜兰特'}
                    ],
                    obj:{
                        title:'hello 循环',
                        author:'jack'
                    }
                },
            })
        </script>
    </body>
    </html>

image-20201215100742502

image-20201215100919834


http://www.niftyadmin.cn/n/525565.html

相关文章

LaTeX在minted环境中插入希腊字母等Unicode字符的方法

LaTeX在minted环境中插入希腊字母等Unicode字符的方法

本文参考How do I display Unicode characters with minted?。 传统上用PDFLaTeX更复杂&#xff0c;这里不推荐。在导言区加上&#xff1a; \documentclass{article} \usepackage[LGR, T1]{fontenc} \usepackage{textcomp} \usepackage[utf8]{inputenc} \usepackage{lmoder…
阅读更多...
表单输入绑定v-model

表单输入绑定v-model

表单输入绑定v-model v-model 双向的数据绑定 双向数据流&#xff08;绑定)&#xff1a; 页面改变影响内存(js)&#xff0c;内存(js)改变影响页面 <!DOCTYPE html><html lang"en"><head><meta charset"utf-8"><meta name&qu…
阅读更多...
LaTeX在minted环境使用数学公式环境（如分式等）

LaTeX在minted环境使用数学公式环境（如分式等）

本文参考minted包官方文档v2.5 from 2017/07/19第24、26页及minted使用。 \begin{minted}[escapeinside||,mathescapetrue,framesingle,bgcolorbg,breaklines,breakanywhere,numbersleft]{mma}|$chi2[\frac{α}{2}, n - 1]$||$chi2[1 - \frac{α}{2}, n - 1]$||$\sqrt{\frac{(…
阅读更多...
使用Adobe Acrobat提取PDF文档中的一页或几页

使用Adobe Acrobat提取PDF文档中的一页或几页

这本来是一个非常简单的问题&#xff0c;然而某度一搜出来居然都是用什么打印文件的方法&#xff0c;于是专门写一篇博文说说怎么提取。 1. 展开页面缩略图&#xff1a; 2. 选中并右键单击要提取的页面&#xff0c;点击提取页面(X)... 3. 选择要提取的范围&#xff0c;并根据自…
阅读更多...
C语言/C++ main函数参数argc和argv不是const的原因

C语言/C++ main函数参数argc和argv不是const的原因

翻译自&#xff1a;Why is argc not a constant? int main(int argc, char *argv[]) 如Effective C Item#3指出"应尽可能使用const"&#xff0c;为何不将argc和argv默认设为const&#xff1f;在何种情景下argc会被修改&#xff1f; 对此问题的回答是&#xff1a;…
阅读更多...
学习汇编语言的理由

学习汇编语言的理由

学习汇编语言的理由&#xff1a; 1、汇编语言仍在发挥不可替代的作用 效率 运行效率&#xff1a;开发软件的核心部件&#xff0c;快速执行和实时响应。 开发效率&#xff1a;做合适的事&#xff0c;开发效率无敌 底层&#xff1a;计算机及外围设备的驱动程序 操作系统的内…
阅读更多...
xv6 2020版使用gdb调试debug的方法

xv6 2020版使用gdb调试debug的方法

本文参考了MIT 6.S081 2020 操作系统 实验环境搭配详解及问题处理&#xff0c;作者为余晨&#xff08;北海草鱼&#xff09;。xv6的安装方法见Windows/Ubuntu qemu虚拟机xv6-riscv利用riscv-gnu-toolchain编译安装方法。该方法适用于Ubuntu上搭建的riscv版的xv6的QEMU虚拟机&am…
阅读更多...
Windows 10使用gvsbuild安装配置GTK

Windows 10使用gvsbuild安装配置GTK

根据GTK官方网站Setting up GTK for Windows&#xff0c;在Windows上安装GTK有两种方法&#xff0c;一种是使用MSYS&#xff0c;这种方法较为简单&#xff0c;在此不表&#xff1b;另一种是使用gvsbuild&#xff0c;较为复杂&#xff0c;流程如下&#xff1a; 安装dependencie…
阅读更多...
最新文章

Copyright @ 2022~2023