百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

第5天 | 14天搞定Vue3.0，循环渲染，燃

ztj100 2024-12-31 15:58 26 浏览 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方面的干货。关注我，没错的。

#前端##Vue.js##程序员##Web##JavaScript#

相关推荐

sharding-jdbc实现`分库分表`与`读写分离`

一、前言本文将基于以下环境整合...

三分钟了解mysql中主键、外键、非空、唯一、默认约束是什么

在数据库中，数据表是数据库中最重要、最基本的操作对象，是数据存储的基本单位。数据表被定义为列的集合，数据在表中是按照行和列的格式来存储的。每一行代表一条唯一的记录，每一列代表记录中的一个域。...

MySQL8行级锁_mysql如何加行级锁

MySQL8行级锁版本：8.0.34基本概念...

mysql使用小技巧_mysql使用入门

1、MySQL中有许多很实用的函数，好好利用它们可以省去很多时间:group_concat()将取到的值用逗号连接，可以这么用:selectgroup_concat(distinctid)fr...

MySQL/MariaDB中如何支持全部的Unicode?

永远不要在MySQL中使用utf8，并且始终使用utf8mb4。utf8mb4介绍MySQL/MariaDB中，utf8字符集并不是对Unicode的真正实现，即不是真正的UTF-8编码，因...

聊聊 MySQL Server 可执行注释，你懂了吗?

前言MySQLServer当前支持如下3种注释风格：...

MySQL系列-源码编译安装(v5.7.34)

一、系统环境要求...

MySQL的锁就锁住我啦!与腾讯大佬的技术交谈，是我小看它了

对酒当歌，人生几何！朝朝暮暮，唯有己脱。苦苦寻觅找工作之间，殊不知今日之事乃我心之痛，难道是我不配拥有工作嘛。自面试后他所谓的等待都过去一段时日，可惜在下京东上的小金库都要见低啦。每每想到不由心中一...

MySQL字符问题_mysql中字符串的位置

中文写入乱码问题：我输入的中文编码是urf8的，建的库是urf8的，但是插入mysql总是乱码，一堆"???????????????????????"我用的是ibatis，终于找到原因了，我是这么解决...

深圳尚学堂:mysql基本sql语句大全(三)

数据开发-经典1.按姓氏笔画排序:Select*FromTableNameOrderByCustomerNameCollateChinese_PRC_Stroke_ci_as//从少...

MySQL进行行级锁的?一会next-key锁，一会间隙锁，一会记录锁?

大家好，是不是很多人都对MySQL加行级锁的规则搞的迷迷糊糊，一会是next-key锁，一会是间隙锁，一会又是记录锁。坦白说，确实还挺复杂的，但是好在我找点了点规律，也知道如何如何用命令分析加...

一文讲清怎么利用Python Django实现Excel数据表的导入导出功能

摘要：Python作为一门简单易学且功能强大的编程语言，广受程序员、数据分析师和AI工程师的青睐。本文系统讲解了如何使用Python的Django框架结合openpyxl库实现Excel...

用DataX实现两个MySQL实例间的数据同步

DataXDataX使用Java实现。如果可以实现数据库实例之间准实时的...

MySQL数据库知识_mysql数据库基础知识

MySQL是一种关系型数据库管理系统；那废话不多说，直接上自己以前学习整理文档：查看数据库命令:(1).查看存储过程状态:showprocedurestatus;(2).显示系统变量:show...

如何为MySQL中的JSON字段设置索引

背景MySQL在2015年中发布的5.7.8版本中首次引入了JSON数据类型。自此，它成了一种逃离严格列定义的方式，可以存储各种形状和大小的JSON文档，例如审计日志、配置信息、第三方数据包、用户自定...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2023011147号-29