vue学习之列表渲染

news2025/1/16 17:46:44

列表渲染

  • 创建 demo8.html,内容如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入 vue 脚本文件 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <!-- DOM区域 -->
    <div id="app">
        <ul>
            <li v-for="(user,i) in userList">
                index: {{i}} name: {{user.name}}
            </li>
        </ul>

    </div>

</body>
<script>
    const vm = {
        data: function() {
            return {
                userList: [{
                    id: 1,
                    name: 'zs'
                }, {
                    id: 2,
                    name: 'ls'
                }, {
                    id: 3,
                    name: 'ww'
                }, ]
            }
        },
    }
    const app = Vue.createApp(vm)
    app.mount('#app')
</script>

</html>

效果展示

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/998146.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode算法心得——判断能否在给定时间到达单元格（动态模拟）

LeetCode算法心得——判断能否在给定时间到达单元格（动态模拟）

大家好&#xff0c;我是晴天学长&#xff0c;这是一个动态模拟题&#xff0c;跟大佬相比&#xff0c;我的有点繁琐了&#xff0c;但是也算是锻炼到自己的一些细节问题&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。 1) .判断能否在给定时间到达单元…
阅读更多...
Pytorch面试题整理（2023.09.10）

Pytorch面试题整理（2023.09.10）

1、pytorch如何微调fine tuning&#xff1f; 在加载了预训练模型参数之后&#xff0c;需要finetuning 模型&#xff0c;可以使用不同方式finetune。 局部微调&#xff1a;加载了模型参数后&#xff0c;只想调节最后几层&#xff0c;其他层不训练&#xff0c;也就是不进行梯度…
阅读更多...
【Endnote】如何出现“作者（年份） found that ....”的格式？

【Endnote】如何出现“作者（年份） found that ....”的格式？

如何出现“作者&#xff08;年份&#xff09; found that ....”的格式&#xff1f; 非常简单&#xff01;先用endnote插入文献后&#xff0c;默认显示&#xff1a; 然后&#xff0c;重点来了&#xff0c;点开这个&#xff1a; 然后&#xff0c;将此处的default改成Display as…
阅读更多...
unique_ptr的大小探讨

unique_ptr的大小探讨

unique_ptr大小和删除器有很大关系&#xff0c;具体区别看如下代码的分析。不要让unique_ptr占用的空间太大&#xff0c;否则不会达到裸指针同样的效果。 #include <iostream> #include <memory> using namespace std;class Widget {int m_x;int m_y;int m_z;publ…
阅读更多...
国产化改造之Mysql迁移方案：Mysql Galera Cluster

国产化改造之Mysql迁移方案：Mysql Galera Cluster

一、背景 因某业务系统OS国产化改造&#xff0c;现需将生成环境Mysql 主从迁移到新部署的BCLinux OS主机上&#xff1b;如果保障业务不断&#xff0c;平滑迁移并成功割接将是本次方案的重要方向&#xff0c;现场环境涉及需迁移数据780G左右&#xff0c;目标主机OS版本&#xff…
阅读更多...
day35 线程

day35 线程

程序&#xff1a;是为了完成特定的任务&#xff0c;用某种语言编写的一组有序指令的集合&#xff0c;是一段静态的代码 进程&#xff1a;是程序的一次执行过程 线程&#xff1a;线程是进程中的一个执行单元 线程是调度和执行的单位 处理器和线程间的关系 创建线程(重点) 创建…
阅读更多...
时序分解 | MATLAB实现MVMD多元变分模态分解信号分量可视化

时序分解 | MATLAB实现MVMD多元变分模态分解信号分量可视化

时序分解 | MATLAB实现MVMD多元变分模态分解信号分量可视化 目录 时序分解 | MATLAB实现MVMD多元变分模态分解信号分量可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MVMD多元变分模态分解 可直接替换Excel运行包含频谱相关系数图 Matlab语言 1.算法新颖小众&…
阅读更多...
LTGNet-超分辨率OCTA图像分割

LTGNet-超分辨率OCTA图像分割

目录 一、摘要 二、引言 三、方法 A. Reference-based框架 B. Learnable Texture Generator 四、实验 五、总结 一、摘要 研究背景&#xff1a;光学相干断层血管成像(OCTA)是一种新的视网膜微血管成像方式&#xff0c;已广泛应用于临床。 高分辨率OCT血管造影对于定性和…
阅读更多...
Brief. Bioinformatics2023 | 利用深度学习和分子动力学模拟设计抗菌肽

Brief. Bioinformatics2023 | 利用深度学习和分子动力学模拟设计抗菌肽

文章标题&#xff1a;Designing antimicrobial peptides using deep learning and molecular dynamic simulations 代码&#xff1a;https://github.com/gc-js/Antimicrobial-peptide-generation 一、问题 PandoraGAN使用手动策划的130个高活性肽的训练数据集&#xff0c;其…
阅读更多...
第11章_瑞萨MCU零基础入门系列教程之SysTick

第11章_瑞萨MCU零基础入门系列教程之SysTick

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…
阅读更多...
QTabWidget当tab位置在左右时，设置文字方向朝上

QTabWidget当tab位置在左右时，设置文字方向朝上

QTabWidget当tab位置在左右时&#xff0c;设置文字方向朝上解决方案 方案一&#xff1a;调用setTabButton()方法方案二&#xff1a;重写QTabBar方案三&#xff1a;重写QProxyStyle 当用QTabWidget控件时&#xff0c;默认是下方显示&#xff1a; 如果想左侧或右侧显示tab页&…
阅读更多...
upload-labs文件上传漏洞通关

upload-labs文件上传漏洞通关

一、环境搭建 upload-labs是一个使用php语言编写的&#xff0c;专门收集渗透测试和CTF中遇到的各种上传漏洞的靶场。 下载地址&#xff1a;https://github.com/c0ny1/upload-labs/releases 在 win 环境下 直接解压到phpstudy下即可 二、通关 &#xff08;一&#xff09;16关…
阅读更多...
【leetcode 力扣刷题】删除字符串中的子串or字符以满足要求

【leetcode 力扣刷题】删除字符串中的子串or字符以满足要求

删除字符串中的子串或者字符以满足题意要求 1234. 替换子串得到平衡字符串680. 验证回文串917. 仅仅反转字母 1234. 替换子串得到平衡字符串 题目链接&#xff1a;1234. 替换子串得到平衡字符串 题目内容&#xff1a; 题目中给出了平衡字符串的定义——只有’Q’&#xff0c;…
阅读更多...
【C++】详解std::thread

【C++】详解std::thread

2023年9月10日&#xff0c;周日下午开始 2023年9月10日&#xff0c;周日晚上23:35完成 虽然这篇博客我今天花了很多时间去写&#xff0c;但是我对std::thread有了一个完整的认识 不过有些内容还没完善&#xff0c;以后有空再更新.... 目录 头文件类的成员类型方法(construc…
阅读更多...
GDB用法(三)

GDB用法(三)

预备 测试代码参照GDB用法(二) 命令历史 可以将命令历史保存到文件中 (show history) 展示当前gdb中history的设置信息 设置expansion (set history expansion) 打开历史扩展 能使用历史处理命令对历史数据进行处理, 暂不细究 (show history expansion) 展示历史扩展配置…
阅读更多...
《JDK17新特性和代码案例演示》

《JDK17新特性和代码案例演示》

《JDK17新特性和代码案例演示》 &#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全…
阅读更多...
sqli --【1--10】

sqli --【1--10】

Less-1&#xff08;联合查询&#xff09; 1.查看是否有回显 2.查看是否有报错 3.使用联合查询&#xff08;字符注入&#xff09; 3.1判断其列数 3.2 判断显示位置 3.3敏感信息查询 Less-2&#xff08;联合查询&#xff09; 1.查看是否有回显 2.查看是否有报错 3.使用…
阅读更多...
[学习笔记]词向量模型-Word2vec

[学习笔记]词向量模型-Word2vec

参考资料&#xff1a; 【word2vec词向量模型】原理详解代码实现 NLP自然语言处理的经典模型Word2vec 论文背景知识 词的表示方法 One-hot Representation&#xff1a;独热表示 简单&#xff0c;但词越多&#xff0c;向量越长。且无法表示词与词之间的关系。 论文储备知识-pr…
阅读更多...
Ae 效果：CC Scatterize

Ae 效果：CC Scatterize

模拟/CC Scatterize Simulation/CC Scatterize CC Scatterize&#xff08;CC 散射&#xff09;主要用于模拟将对象散射为颗粒状的效果。 CC Scatterize 的工作原理是&#xff1a;对源图像的 Alpha 通道先进行融解 Dissolve&#xff0c;从而产生随机颗粒&#xff0c;因此改变了源…
阅读更多...
安卓系列机型 另类体验第三方系统 DSU操作步骤解析 不影响主系统开启第二系统

安卓系列机型 另类体验第三方系统 DSU操作步骤解析 不影响主系统开启第二系统

dsu loader即 动态系统更新&#xff0c;可以在使用动态分区的安卓设备上&#xff0c;不影响原来系统的同时安装一个副系统&#xff0c;用于体验最新的原生安卓系统。可以不影响主系统的基础上体验其他gsi第三方。DSU 依赖于 Android 动态分区功能&#xff0c;并要求 GSI 作为可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023