Vue3学习笔记(5.0)

Vue.js循环语句

v-for指令需要以site in sites形式的特殊语法,sites是源数据数组并且site是数组元素迭代的别名。

v-for可以绑定数据到数组来渲染一个列表:

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-26 16:32:27
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="test in sites">
                {{test.city}}
            </li>

        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    sites:[
                    {city:'sanghai'},
                    {city:"beijing"},
                    {city:"henan"}
                    ]
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 v-for还支持一个可选的第二个参数,参数值为当前项的索引:
 

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:33:47
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="(test,index) in sites">
                {{index}}-{{test.city}}
            </li>

        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    sites:[
                    {city:'sanghai'},
                    {city:"beijing"},
                    {city:"henan"}
                    ]
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 模板<template>中使用v-for:

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:40:01
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="(test,index) in sites">
                <li >
                    {{index}}-{{test.city}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    sites:[
                    {city:'sanghai'},
                    {city:"beijing"},
                    {city:"henan"}
                    ]
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 v-for迭代对象

v-for可以通过一个对象的属性来迭代数据:
 

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:49:21
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="test in objects">
                <li >
                    {{test}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    objects:{
                    city1:'sanghai',
                    city2:"beijing",
                    city3:"henan"
                    }
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

当然了,也可以以键值对的形式进行展示

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:54:04
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="(test,key) in objects">
                <li >
                    {{key}}:{{test}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    objects:{
                    city1:'sanghai',
                    city2:"beijing",
                    city3:"henan"
                    }
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 这里的命名并不是固定的,但是比较规范的写法是左边为键key,右边为值value。

我们再混合运用以下,再加上索引

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:57:37
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="(test,key,index) in objects">
                <li >
                    {{index}}-{{key}}:{{test}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    objects:{
                    city1:'sanghai',
                    city2:"beijing",
                    city3:"henan"
                    }
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 v-for也可以迭代整数

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:59:41
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="(test,index) in 10">
                <li >
                    {{index}}-{{test}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    objects:{
                    city1:'sanghai',
                    city2:"beijing",
                    city3:"henan"
                    }
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

下面的script里面的内容相当于声明,在上面的HTML中可以不用,并不影响代码执行。

 显示过滤/排序后的结果

我们可以对数组的元素进行处理后再显示出来,一般可以通过创建一个计算属性,来返回过滤或排序后的数组。

下面将筛选出一堆数字中的偶数

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 10:13:06
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <!-- <template v-for="(test,index) in 10"> -->
                <li v-for="a in oushu">
                    {{a}}
                </li>
                <!-- <li>+++++++++++++++</li> -->
            <!-- </template> -->
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    // objects:{
                    // city1:'sanghai',
                    // city2:"beijing",
                    // city3:"henan"
                    numbers:[1,2,3,4,5,6,7,8,9,10]
                    }
                },
                computed:{
                    oushu(){
                        return this.numbers.filter(num=>num%2===0)
                    }
                }
            }
        
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 v-for/v-if联合使用

以上实例联合使用v-for/v-if给select设置默认值:

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 10:38:24
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <!-- <ol>
             <template v-for="(test,index) in 10"> 
                <li v-for="a in oushu">
                    {{a}}
                </li>
                 <li>+++++++++++++++</li> 
            </template> 
        </ol> -->
        <select  @change="changeopt($event)" v-model="opt">
            <template v-for="(item,index) in city" :city="item" :index="index" :key="item.id">
                <option v-if="index==1" :value="item.name"  selected>{{item.name}}</option>
                <option v-else :value="item.name">{{item.name}}</option>

            </template>
        </select>
        <div>您选中了:{{opt}}</div>
    </div>

    <script>
        const name={
            data(){
                return {
                    // objects:{
                    // city1:'sanghai',
                    // city2:"beijing",
                    // city3:"henan"
                    // numbers:[1,2,3,4,5,6,7,8,9,10]
                    opt:"Mez",
                    city:[
                        {id:1,name:"shanghai"},
                        {id:2,name:"Mez"},
                        {id:3,name:"beijing"}
                    ]
                    }
                },
                methods:{
                    changeopt:function(event){
                        // return this.numbers.filter(num=>num%2===0)
                        this.opt=event.target.value;
                        alert("这个值被选中:"+this.opt);
                    }
                }
            }
        
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 在组件上使用v-for

在自定义组件上,我们可以像在任何普通元素上使用v-for:

<my-component v-for="item in items" :key="item.id"></my-component>

然而,任何数据都不会自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传到组件里,我们要使用props:

<my-component
 v-for="(item,index) in items"
 :item="item"
 :index="index"
 :key="item.id"
></my-component>

不自动将item注入到组件里的原因是,这会使得组件与v-for的运作紧密结合。明确组件数据的来源能够使组件在其他场合重复使用。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-29 10:49:17
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 14:27:35
 * @FilePath: \vscode\todo.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="todo-list">
        <form action="" v-on:submit.prevent="addlist">
            <label for="new-todo">添加列表项</label>
            <input  v-model="newtext" id="new-todo" placeholder="填写示例:唱跳rap篮球" />
            <button>添加</button>
        </form>
        <ul>
            <todo-item v-for="(todo,index) in lists" :key="todo.id" :title="todo.title" @remove="lists.splice(index,1)"></todo-item>
        </ul>
    </div>

    <script>
        const mez=Vue.createApp({
            data(){
                return{
                    newtext:'',
                    lists:[
                        {id:1,title:'唱'
                    },
                    {id:2,title:'跳'
                    },
                    {id:3,title:'rap'
                    },
                    ],
                    nextTodoId:4
                }
            },
            methods:{
                addlist(){
                    this.lists.push({
                        id:this.nextTodoId++,
                        title:this.newtext
                    })
                    this.newtext=''
                }
            }
        })
        mez.component('todo-item',{
            template:`
            <li>
                {{title}}
                <button @click="$emit('remove')">删除</button>
            </li>`,
            props:['title'],
            emits:['remove']
            
        })
        mez.mount('#todo-list')
    </script>
</body>
</html>

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

图解redis的client的实现

目录 1.引言 2.客户端属性 2.1套接字描述符 2.2 name 2.3 客户端标志 2.4输入缓冲区 2.5命令与命令参数 2.6命令实现的函数 2.7输出缓冲区 2.8身份验证 2.9 时间 3.客户端的创建的关闭 3.1普通客户端的创建 3.2普通客户端的关闭 3.AOF的伪客户端 1.引言 Redis服务…

(数字图像处理MATLAB+Python)第二章数字图像处理基础-第三、四节:数字图像的生成和数值描述

文章目录一&#xff1a;数字图像的生成与表示&#xff08;1&#xff09;图像信号的数字化&#xff08;2&#xff09;数字图像类型二&#xff1a;数字图像的数值描述&#xff08;1&#xff09;常用坐标系&#xff08;2&#xff09;数字图像的数据结构&#xff08;3&#xff09;常…

Typora使用

Typora Typora 是一款支持实时预览的 Markdown 文本编辑器。 1. 基础操作 1.1标题 # 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题1.2 引用 > 引用内容1 > 引用内容2 >> 引用内容31.3 斜体 *斜体* _斜体_1.4 加粗…

mysql整理

文章目录概述SQLDDLDMLDQL单表查询多表查询DQL的执行顺序DCL管理用户控制权限函数约束事务存储引擎索引概述语法性能分析索引的使用SQL的优化insert优化主键优化Order by优化其它优化存储对象视图存储过程基本操作变量IF条件判断参数循环条件处理程序存储函数触发器锁全局锁表级…

Mysql-缓冲池 buffer pool

缓冲池 buffer pool innodb中的数据是以【页】的形式存储在磁盘上的表空间内&#xff0c;但是【磁盘的速度】和【内存】相比简直不值一提&#xff0c;而【内存的速度】和【cpu的速度】同样不可同日而语&#xff0c;对于数据库而言&#xff0c;I/O成本永远是不可忽略的一项成本…

基于Elman神经网络预测计费系统的输出(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 简单循环网络&#xff08;simple recurrent networks&#xff0c;简称SRN&#xff09;又称为Elman network&#xff0c;是由Jeff…

什么是AI文章生成器-AI文章生成器批量生成文章

AI文章生成器有哪些 目前市面上存在一些可以生成文章的 AI 文章生成器&#xff0c;以下是其中几种常见的&#xff1a; OpenAI GPT-3&#xff1a; OpenAI GPT-3 是目前最先进、最著名的 AI 文章生成器之一&#xff0c;它可以生成各种类型的文章&#xff0c;例如新闻报道、科学报…

我的Macbook pro使用体验

刚拿到Mac那一刻&#xff0c;第一眼很惊艳&#xff0c;不经眼前一亮&#xff0c;心想&#xff1a;这是一件艺术品&#xff0c;太好看了吧 而后再体验全新的Macos 系统&#xff0c;身为多年的win用户说实话一时间还是难以接受 1.从未见过的访达&#xff0c;不习惯的右键 2. …

[论文解析] Cones: Concept Neurons in Diffusion Models for Customized Generation

论文连接&#xff1a;https://readpaper.com/pdf-annotate/note?pdfId4731757617890738177&noteId1715361536274443520 源码链接&#xff1a; https://github.com/Johanan528/Cones 文章目录OverviewWhat problem is addressed in the paper?Is it a new problem? If so…

PMP一般要提前多久备考?

PMP很迷&#xff0c;有只备考了一周过的&#xff0c;也有备考几个月过的。保险起见&#xff0c;预留两个月比较靠谱&#xff0c;尤其现在是新考纲&#xff0c;PMP新版大纲加入了 ACP 敏捷管理的内容&#xff0c;而且还不少&#xff0c;敏捷混合题型占到了 50%&#xff0c;前不久…

AcWing3662. 最大上升子序列和(线性DP + 树状数组优化 + 离散化处理)

AcWing3662. 最大上升子序列和&#xff08;线性DP 树状数组优化 离散化处理&#xff09;一、问题二、分析1、DP过程&#xff08;1&#xff09;状态表示&#xff08;2&#xff09;状态转移2、数据结构优化&#xff08;1&#xff09;树状数组维护最值&#xff08;2&#xff09;…

K8s 弃用 Docker!一文介绍 containerd ctr、crictl 使用

containerd 是一个高级容器运行时&#xff0c;又名 容器管理器。简单来说&#xff0c;它是一个守护进程&#xff0c;在单个主机上管理完整的容器生命周期&#xff1a;创建、启动、停止容器、拉取和存储镜像、配置挂载、网络等。 containerd 旨在轻松嵌入到更大的系统中。Docke…

【ASPLOS 2023】图神经网络统一图算子抽象uGrapher,大幅提高计算性能

作者&#xff1a;周杨杰、沈雯婷 开篇 近日&#xff0c;阿里云机器学习平台PAI和上海交通大学冷静文老师团队合作的论文《图神经网络统一图算子抽象uGrapher》被ASPLOS 2023录取。 为了解决当前图神经网络中框架中不同的图算子在不同图数据上静态kernel的性能问题&#xff0…

【前沿技术】文心一言 PK Chat Gpt

目录 写在前面 一、文心一言 二、Chat GPT 三、对比 四、总结 写在前面 随着人工智能技术的不断发展和普及&#xff0c;越来越多的智能应用走入了人们的日常生活&#xff0c;如智能语音助手、智能客服、机器翻译等等。在这些应用中&#xff0c;自然语言生成&#xff08;…

看完不再愁 | 图解TCP 重传、滑动窗口、流量控制、拥塞控制

目录 前言 正文 &#x1f332; 重传机制 1. 超时重传 2. 快速重传 3. SACK 方法 4. Duplicate SACK &#x1f332; 滑动窗口 &#x1f333; 流量控制 &#x1f333; 拥塞控制 1. 慢启动 2. 拥塞避免算法 3. 拥塞发生 4. 快速恢复 前言 前面我们讲到「硬不硬你说…

Android开发一直在用大公司的开源库,可参考~

一、阿里巴巴 &#xff08;一&#xff09;UI有关 1. 多页面切换场景统一解决方案 UltraViewPager UltraViewPager 是阿里开源的一个封装多种特性的 ViewPager &#xff0c;主要是为多页面切换场景提供统一解决方案。 主要功能: 1. 支持横向滑动&#xff0f;纵向滑动2. 支持一屏…

求红白黑球的个数-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

【案例2-11】求红白黑球的个数 一、案例描述 考核知识点 for循环语句、if判断语句 练习目标 掌握for循环应用。掌握if判断语句应用 需求分析 用js编程 已知&#xff1a;红白球共25个&#xff0c;白黑球共31个&#xff0c;红黑球共28个&#xff0c;求三种球各有多少&#xff…

基于STM32 SG90 9g舵机控制

文章目录一、什么是舵机&#xff1f;二、工作原理三、利用PWM控制四、stm32舵机控制一、什么是舵机&#xff1f; 产品参数 名称&#xff1a;9克舵机180度 尺寸&#xff1a;23mm X 12.2mm X 29mm 重量&#xff1a;9克 扭矩&#xff1a;1.5kg/cm 工作电压&#xff1a;4.2 - 6V 温…

Java大数字运算(BigInteger类和BigDecimal类)

在 Java 中提供了用于大数字运算的类&#xff0c;即 java.math.BigInteger 类和 java.math.BigDecimal 类。这两个类用于高精度计算&#xff0c;其中 BigInteger 类是针对整型大数字的处理类&#xff0c;而 BigDecimal 类是针对大小数的处理类。 BigInteger 类 如果要存储比 …

一本通 3.3.1 树与二叉树

树与二叉树的基本知识 1336&#xff1a;【例3-1】找树根和孩子 【题目描述】 给定一棵树&#xff0c;输出树的根root&#xff0c;孩子最多的结点max以及他的孩子。 【题目分析】 【代码实现】 #include<bits/stdc.h> using namespace std; int father[201], sum[101]…