当前位置： 首页 > news >正文

11-1.Vue2.x基本列表—v-for

news 2025/12/15 19:00:41

文章目录

    • Vue2.x基本列表—v-for

Vue2.x基本列表—v-for

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>基本列表</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- v-for指令：1.用于展示列表数据2.语法：v-for="(item,index) in arr" :key="item.id"3.可遍历：数组、对象、字符串--><!-- 准备一个容器 --><div id="root"><ul><!-- 使用v-for遍历数组 --><li v-for="(item,index) in persons" :key="item.id">{{item.id}}-----{{item.name}}------{{item.age}}岁-----{{item.sex}}</li></ul><div>汽车信息</div><ul><!-- 使用v-for遍历对象 --><li v-for="(value,key) in car" :key="key">{{value}}</li></ul><h2>测试遍历字符串</h2><ul><li v-for="(data,index) in str">{{data}}---{{index}}</li></ul></div><script>new Vue({el: "#root",data: {persons: [{ id: "001", name: "老张", age: 20, sex: "男" },{ id: "002", name: "老刘", age: 29, sex: "女" },{ id: "003", name: "老马", age: 32, sex: "男" },{ id: "004", name: "老王", age: 50, sex: "女" },],car: {name: "奔驰G63",price: "60万",color: "灰色",},str: "abcdef",},});</script></body>
</html>

相关文章：

11-1.Vue2.x基本列表—v-for

文章目录 Vue2.x基本列表—v-for Vue2.x基本列表—v-for <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>基本列表</title><script type"text/javascript" src"../js/vue.j…...

编程日记 2024/4/17 0:16:59

一本书精通推荐算法，轻松搞定入门、面试、进阶

当前互联网高速发展&#xff0c;用户规模和内容规模均迅猛提升。 身处信息严重过载的时代&#xff0c;如何让用户从海量信息中发现自己感兴趣的内容&#xff0c;成了很多公司的核心问题。 在此背景下&#xff0c;搜索系统和推荐系统应运而生。 前者主要解决用户主动寻找内容…...

编程日记 2024/4/17 0:13:56

ADB的基本语法及常用命令

学习网址 ADB命令的基本语法如下&#xff1a; adb [-d|-e|-s <serialNumber>] <command> 如果有多个设备/模拟器连接&#xff0c;则需要为命令指定目标设备。 参数及含义如下&#xff1a; 常用命令如下&#xff1a; 1. 启动ADB服务 adb start-server 2. 停止…...

编程日记 2024/4/17 0:11:53

Linux之bpfjit(2)使用分析和mini-tcpdump实现

Linux之bpfjit(2)使用分析和mini-tcpdump实现 Author: Once Day Date: 2024年4月13日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可以参考专栏&#xff1a;…...

编程日记 2024/4/17 0:04:47

adb常用命令汇总

Android Debug Bridge (adb) 是一个多功能命令行工具&#xff0c;它允许你与连接的Android设备或在电脑上的Android模拟器进行通信。下面列出了一些常用的adb命令&#xff1a; 启动adb服务&#xff1a; adb start-server停止adb服务&#xff1a; adb kill-server查看已连接的设…...

编程日记 2024/4/17 0:03:46

JVM虚拟机（三）垃圾回收简介、垃圾回收算法、分代回收、垃圾回收器种类、G1垃圾回收器

目录 一、什么是垃圾回收&#xff1f;1.1 什么是垃圾回收&#xff1f;1.2 什么对象能被垃圾回收&#xff1f;1&#xff09;引用计数法2&#xff09;可达性分析算法 二、JVM 垃圾回收算法2.1 标记清除算法2.2 标记整理算法&#xff08;标记压缩算法&#xff09;2.3 复制算法2.4 …...

编程日记 2024/4/17 0:02:45

JavaScript基础：js介绍、变量、数据类型以及类型转换

目录 介绍 引入方式 内部方式 外部形式 注释和结束符 单行注释 多行注释 结束符 输入和输出 输出 输入 变量 声明 赋值 关键字 变量名命名规则 常量 数据类型 数值类型 字符串类型 布尔类型 undefined 类型转换 隐式转换 显式转换 Number ✨介绍 &a…...

编程日记 2024/4/17 0:01:44

【牛客SQL快速入门】SQL基础（三）

一、条件函数 IF 条件函数 IF函数是最常用到的条件函数&#xff0c;写法为 if(xn,a,b)&#xff0c;xn代表判断条件&#xff0c;如果xn时&#xff0c;那么结果返回a&#xff0c;否则返回b。 -- 把非北京大学的用户统一归为其他大学 Select device_id,if(university ‘北京大…...

编程日记 2024/4/17 0:00:43

Pytorch手撸Attention

Pytorch手撸Attention 注释写的很详细了&#xff0c;对照着公式比较下更好理解&#xff0c;可以参考一下知乎的文章 注意力机制 import torch import torch.nn as nn import torch.nn.functional as Fclass SelfAttention(nn.Module):def __init__(self, embed_size):super(S…...

编程日记 2024/4/16 23:59:42

PyCharm 2024.1 发布：全面升级，助力高效编程！

PyCharm 2024.1 发布&#xff1a;全面升级&#xff0c;助力高效编程&#xff01; 文章目录 PyCharm 2024.1 发布&#xff1a;全面升级&#xff0c;助力高效编程&#xff01;摘要引言 Hugging Face&#xff1a;模型和数据集的快速文档预览针对 JavaScript 和 TypeScript 的全行代…...

编程日记 2024/4/16 23:55:38

Nginx基础（06）

Nginx基础&#xff08;05&#xff09; uWSGI 介绍 uWSGI 是一个 Web服务器 主要用途是将Web应用程序部署到生产环境中 可以用来连接Nginx服务与Python动态网站 1. 用 uWSGI 部署 Python 网站项目 配置 Nginx 使其可以将动态访问转交给 uWSGI 安装 python 工具及依赖 安…...

编程日记 2024/4/16 23:54:37

【Qt 学习笔记】QWidget的windowOpacity属性 | cursor属性 | font属性

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ QWidget的windowOpacity属性 | cursor属性 | font属性 文章编号&#…...

编程日记 2024/4/16 23:52:34

Python爬虫：requests模块的基本使用

学习目标&#xff1a; 了解 requests模块的介绍掌握 requests的基本使用掌握 response常见的属性掌握 requests.text和content的区别掌握 解决网页的解码问题掌握 requests模块发送带headers的请求掌握 requests模块发送带参数的get请求 1 为什么要重点学习requests模块&…...

编程日记 2024/4/16 23:50:32

C++traits

traits C的标准库提供了<type_traits>,它定义了一些编译时基于模板类的接口用于查询、修改类型的特征&#xff1a;输入的时类型&#xff0c;输出与该类型相关的属性 通过type_traits技术编译器可以回答一系列问题&#xff1a;它是否为数值类型&#xff1f;是否为函数对象…...

编程日记 2024/4/16 23:48:31

gitee和idea集成

1 集成插件 2 配置账号密码 3 直接将项目传到仓库 4直接从gitee下载项目...

编程日记 2024/4/16 23:47:30

阿维·威格德森（Avi Wigderson）研究成果对人工智能领域的应用有哪些影响

AI人工智能的影响 威格德森&#xff08;Avi Wigderson&#xff09;的研究成果对人工智能领域的应用产生了深远的影响。 首先&#xff0c;威格德森在计算复杂性理论、算法和优化方面的贡献为人工智能领域提供了高效、准确的计算模型和算法。他的研究帮助我们更好地理解计算问题…...

编程日记 2024/4/16 23:46:29

【免费领取源码】可直接复用的医院管理系统！

今天给大家分享一套基于SpringbootVue的医院管理系统源码&#xff0c;在实际项目中可以直接复用。(免费提供&#xff0c;文中自取) 系统运行图&#xff08;设计报告和接口文档&#xff09; 1、后台管理页面 2、排班管理页面 3、设计报告包含接口文档 源码免费领取方式 后台私信…...

编程日记 2024/4/16 23:45:26

leetcode代码记录（全排列 II

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 给定一个可包含重复数字的序列 nums &#xff0c;按任意顺序 返回所有不重复的全排列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,2] 输出&#xff1a; [[1,1,2], [1,2,1], [2,1…...

编程日记 2024/4/16 23:42:23

【数据结构与算法】之双向链表及其实现！

​ 个人主页&#xff1a;秋风起&#xff0c;再归来~ 数据结构与算法 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 目录 1、双向链表的结构及概念 2、双向链表的实现 2.1 要实现的接口…...

编程日记 2024/4/16 23:41:22

记一次奇妙的某个edu渗透测试

前话&#xff1a; 对登录方法的轻视造成一系列的漏洞出现&#xff0c;对接口确实鉴权造成大量的信息泄露。从小程序到web端网址的奇妙的测试就此开始。&#xff08;文章厚码&#xff0c;请见谅&#xff09; 1. 寻找到目标站点的小程序 进入登录发现只需要姓名加学工号就能成功…...

编程日记 2024/4/16 23:40:21

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/11/25 5:13:22

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/12/14 17:38:32

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/12/14 22:06:49

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/11/25 22:42:21

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/12/9 20:00:33

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/12/11 9:49:13

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/12/12 12:28:48

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/12/11 21:08:29

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2025/12/5 23:45:56

react菜单，动态绑定点击事件，菜单分离出去单独的js文件，Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...

编程新知 2025/12/3 5:23:36