第5天 | 14天搞定Vue3.0，循环渲染，燃
ztj100 2024-12-31 15:58 15 浏览 0 评论
开发一个Web系统，如果没有涉及到列表功能的话，那真的有点奇葩了，而循环输出列表内容，不用for循环语句的话，那我真不知道该用什么了。在Vue3.0中，v-for指令基于一个数组来渲染输出一个列表内容。
5.1 v-for输出项
Vue的v-for指令使用 item in items 形式的特殊语法，同其他编程语言(如Python)并没有多大区别。其中items是源数据数组，而 item则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0循环语法</title>
<script src="vue.global.js"></script>
<style>
.lang {
border: 1px solid darkcyan;
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div class="lang">
老陈说编程，暂定计划
<ol id="program">
<li v-for="item in items">
{{ item.lang }}
</li>
</ol>
</div>
<script>
Vue.createApp({
data() {
return {
items: [{lang: 'Python'}, {lang: '前端'},
{lang: 'Vue3.0'}, {lang: 'Django3.0'},
{lang: 'Java'}, {lang: 'App'}]
}
}
}).mount("#program")
</script>
</body>
</html>输出结果
5.2 索引和值
数据列表在表格输出时，常常需要用到序号。v-for指令支持输出下标，将下标+1，即可获得序号。为了更接近 JavaScript 迭代器的语法，Vue3.0支持用of替代in作为分隔。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0循环语法</title>
<script src="vue.global.js"></script>
<style>
h1 {
text-align: center;
}
table {
width: 600px;
margin: 0 auto;
text-align: center;
height: 200px;
}
td, th {
border: 1px solid #bcbcbc;
padding: 5px 10px;
}
th {
background: #42b983;
font-size: 1.2rem;
font-weight: 400;
color: #fff;
cursor: pointer;
}
tr:nth-of-type(odd) {
background: #fff;
}
tr:nth-of-type(even) {
background: #eee;
}
</style>
</head>
<body>
<h1>老陈说编程，计划表</h1>
<table id="program">
<thead>
<tr>
<th>序号</th>
<th>编程语言</th>
<th>备注</th>
</tr>
</thead>
<tr v-for="(item,index) of items">
<td>{{ index + 1 }}</td>
<td>{{ item.lang }}</td>
<td>{{ item.remark }}</td>
</tr>
</table>
<script>
Vue.createApp({
data() {
return {
items: [
{lang: 'Python', remark: '入门、数据分析、爬虫'},
{lang: '前端', remark: '网页三贱客'},
{lang: 'Vue3.0', remark: '能在项目中应用'},
{lang: 'Django3.0', remark: '企业实战项目'},
{lang: 'Java', remark: '从0开始入门'},
{lang: 'App', remark: '安卓和iOS等开发'}]
}
}
}).mount("#program")
</script>
</body>
</html>输出结果
5.3 v-for和v-if
由于当v-if和v-for处于同一节点时，v-if的优先级比v-for更高，这意味着v-if将没有权限访问v-for里的变量，就是说不可以将v-if和v-for放在同一个元素里。
<!-- v-forv-if 和不可以放在同一个元素内 -->
<li v-for="item in items" v-if="item==true">
{{ good }}
</li>为了解决v-for和v-if同一水平的问题，你可以把v-for移动到<template> 标签中进行修正。就是将v-if放到v-for内部去的意思。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0循环语法</title>
<script src="vue.global.js"></script>
<style>
h1 {
text-align: center;
color: darkorange;
}
table {
width: 600px;
margin: 0 auto;
text-align: center;
height: 200px;
}
td, th {
border: 1px solid #bcbcbc;
padding: 5px 10px;
}
th {
background: #42b983;
font-size: 1.2rem;
font-weight: 400;
color: #fff;
cursor: pointer;
}
tr:nth-of-type(odd) {
background: #fff;
}
tr:nth-of-type(even) {
background: #eee;
}
</style>
</head>
<body>
<h1>老陈说编程，编程语言完成进度</h1>
<table id="program">
<thead>
<tr>
<th>序号</th>
<th>编程语言</th>
<th>完成情况</th>
</tr>
</thead>
<template v-for="(item,index) in items">
<tr>
<td>
{{ index + 1 }}
</td>
<td>
{{ item.lang }}
</td>
<td>
<span v-if="item.todo==1">
已完成
</span>
<span v-else-if="item.todo==2">
进行中
</span>
<span v-else>
将启动
</span>
</td>
</tr>
</template>
</table>
<script>
Vue.createApp({
data() {
return {
items: [
{lang: 'Python', todo: 1,},
{lang: '前端', todo: 1},
{lang: 'Vue3.0', todo: 2},
{lang: 'Django3.0', todo: 3},
{lang: 'Java', todo: 3},
{lang: 'App', todo: 3}]
}
}
}).mount("#program")
</script>
</body>
</html>输出结果
好了，有关for循环渲染的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。
相关推荐
- Java项目宝塔搭建实战MES-Springboot开源MES智能制造系统源码
-
大家好啊，我是测评君，欢迎来到web测评。...
- 一个令人头秃的问题，Logback 日志级别设置竟然无效?
-
原文链接：https://mp.weixin.qq.com/s/EFvbFwetmXXA9ZGBGswUsQ原作者：小黑十一点半...
- 实战!SpringBoot + RabbitMQ死信队列实现超时关单
-
需求背景之为什么要有超时关单原因一：...
- 火了!阿里P8架构师编写堪称神级SpringBoot手册，GitHub星标99+
-
Springboot现在已成为企业面试中必备的知识点，以及企业应用的重要模块。今天小编给大家分享一份来着阿里P8架构师编写的...
- Java本地搭建宝塔部署实战springboot仓库管理系统源码
-
大家好啊，我是测评君，欢迎来到web测评。...
- 工具尝鲜(1)-Fleet构建运行一个Springboot入门Web项目
-
Fleet是JetBrains公司推出的轻量级编辑器，对标VSCode。该款产品还在公测当中，具体下载链接如下JetBrainsFleet：由JetBrains打造的下一代IDE。想要尝试的...
- SPRINGBOOT WEB 实现文件夹上传(保留目录结构)
-
网上搜到的SpringBoot的代码不多，完整的不多，能用的也不多，基本上大部分的文章只是提供了少量的代码，讲一下思路，或者实现方案。之前一般的做法都是使用HTML5来做的，大部都是传文件的，传文件夹...
- Java项目本地部署宝塔搭建实战报修小程序springboot版系统源码
-
大家好啊，我是测评君，欢迎来到web测评。...
- 新年IT界大笑料“工行取得基于SpringBoot的web系统后端实现专利
-
先看看专利描述...
- 看完SpringBoot源码后，整个人都精神了
-
前言当读完SpringBoot源码后，被Spring的设计者们折服，Spring系列中没有几行代码是我们看不懂的，而是难在理解设计思路，阅读Spring、SpringMVC、SpringBoot需要花...
- 阿里大牛再爆神著:SpringBoot+Cloud微服务手册
-
今天给大家分享的这份“Springboot+Springcloud微服务开发实战手册”共有以下三大特点...
- WebClient是什么?SpringBoot中如何使用WebClient?
-
WebClient是什么？WebClient是SpringFramework5引入的一个非阻塞、响应式的Web客户端库。它提供了一种简单而强大的方式来进行HTTP请求，并处理来自服务器的响应。与传...
- SpringBoot系列——基于mui的H5套壳APP开发web框架
-
前言 大致原理：创建一个main主页面，只有主页面有头部、尾部，中间内容嵌入iframe内容子页面，如果在当前页面进行跳转操作，也是在iframe中进行跳转，而如果点击尾部按钮切换模块、页面，那...
- 在Spring Boot中使用 jose4j 实现 JSON Web Token (JWT)
-
JSONWebToken或JWT作为服务之间安全通信的一种方式而闻名。...
- Spring Boot使用AOP方式实现统一的Web请求日志记录?
-
AOP简介AOP(AspectOrientedProgramming)，面相切面编程，是通过代码预编译与运行时动态代理的方式来实现程序的统一功能维护的方案。AOP作为Spring框架的核心内容，通...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Java项目宝塔搭建实战MES-Springboot开源MES智能制造系统源码
- 一个令人头秃的问题，Logback 日志级别设置竟然无效?
- 实战!SpringBoot + RabbitMQ死信队列实现超时关单
- 火了!阿里P8架构师编写堪称神级SpringBoot手册，GitHub星标99+
- Java本地搭建宝塔部署实战springboot仓库管理系统源码
- 工具尝鲜(1)-Fleet构建运行一个Springboot入门Web项目
- SPRINGBOOT WEB 实现文件夹上传(保留目录结构)
- Java项目本地部署宝塔搭建实战报修小程序springboot版系统源码
- 新年IT界大笑料“工行取得基于SpringBoot的web系统后端实现专利
- 看完SpringBoot源码后，整个人都精神了
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)