循环语句详解

文章目录

  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数,参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list

循环语句详解

1. 循环使用 v-for 指令

v-for 指令需要以 site in sites 形式的特殊语法

  • sites源数据数组并且 site 是数组元素迭代的别名

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 v-for 可以绑定数据到数组来渲染一个列表 相当于Java中的for循环</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表--><ol><li v-for="site in sites">{{ site.text }}</li></ol>
</div><script>//    定义Vue3的HelloVueApp应用const HelloVueApp = {// 设置返回值为一个列表data() {return {sites: [{text: 'Google'},{text: 'Runoob'},{text: 'TaoBao'}]}}}// 创建HelloVueApp应用,mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

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

index 为列表项的索引值

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 v-for 还支持一个可选的第二个参数,参数值为当前项的索引</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表index 为列表项的索引值--><ol><li v-for="(site, index) in sites">{{ index }} - {{ site.text }}</li></ol>
</div><script>//    定义Vue3的HelloVueApp应用const HelloVueApp = {// 设置返回值为一个列表data() {return {sites: [{text: 'Google'},{text: 'Runoob'},{text: 'TaoBao'}]}}}// 创建HelloVueApp应用,mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述

3. 模板template 中使用 v-for

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在模板 <template> 中使用 v-for</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表--><ol>
<!--       在模板 <template> 中使用 v-for --><template v-for="site in sites"><li>{{ site.text }}</li><li>------------------</li></template></ol>
</div><script>//    定义Vue3的HelloVueApp应用const HelloVueApp = {// 设置返回值为一个列表data() {return {sites: [{text: 'Google'},{text: 'Runoob'},{text: 'TaoBao'}]}}}// 创建HelloVueApp应用,mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果:
在这里插入图片描述
在这里插入图片描述

4. v-for 迭代对象-第一个参数为value

v-for 可以通过一个对象的属性来迭代数据,第一个参数为value

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 v-for 迭代对象 v-for 可以通过一个对象的属性来迭代数据</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表--><ol>
<!--       在模板 <template> 中使用 v-for --><template v-for="value in object"><li>{{ value }}</li></template></ol>
</div><script>//    定义Vue3的HelloVueApp应用const HelloVueApp = {data() {// 设置返回值为一个对象return {object: {name: 'Build Yours Dreams',url: 'https://www.bydglobal.com/cn/index.html',slogan: '科技 绿色 明天'}}}}// 创建HelloVueApp应用,mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果:
在这里插入图片描述
在这里插入图片描述

5. v-for的第二个参数为键名

v-for的第二个的参数为键名

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 v-for 迭代对象 v-for 可以通过一个对象的属性来迭代数据</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表--><ol>
<!--       在模板 <template> 中使用 v-for --><template v-for="(value, key) in object"><li>{{ key }} : {{ value }}</li></template></ol>
</div><script>//    定义Vue3的HelloVueApp应用const HelloVueApp = {data() {// 设置返回值为一个对象return {object: {name: 'Build Yours Dreams',url: 'https://www.bydglobal.com/cn/index.html',slogan: '科技 绿色 明天'}}}}// 创建HelloVueApp应用,mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果:
在这里插入图片描述
在这里插入图片描述

6. v-for的第三个参数为索引

v-for的第三个参数为索引

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 v-for 迭代对象 v-for 可以通过一个对象的属性来迭代数据</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表--><ol>
<!--       在模板 <template> 中使用 v-for --><template v-for="(value, key, index) in object"><li>{{ index }} . {{ key }} : {{ value }}</li></template></ol>
</div><script>//    定义Vue3的HelloVueApp应用const HelloVueApp = {data() {// 设置返回值为一个对象return {object: {name: 'Build Yours Dreams',url: 'https://www.bydglobal.com/cn/index.html',slogan: '科技 绿色 明天'}}}}// 创建HelloVueApp应用,mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

7. v-for迭代整数

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 v-for 迭代整数</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><!--    v-for 迭代整数 相当于Java中的for循环循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表--><ul>
<!--       在模板 <template> 中使用 v-for --><template v-for="n in 10"><li>{{ n }}</li></template></ul>
</div><script>// 创建app应用,mount('#app') 将 Vue 应用 app 挂载到 <div id="app" class="demo">中Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

8. computed计算属性显示过滤/排序后的结果

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 v-for 显示过滤/排序后的结果</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><!--    v-for 显示过滤/排序后的结果 相当于Java中的for循环可以对数组的元素进行处理后再显示出来,一般可以通过创建一个计算属性,来返回过滤或排序后的数组循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表--><ul>
<!--       在模板 <template> 中使用 v-for --><template v-for="n in evenNumber"><li>{{ n }}</li></template></ul>
</div><script>
//    定义Vue应用appconst HelloVueApp = {data() {//     定义返回值为一个数组return {numbers: [1, 2, 3, 4, 5]}},//     在计算属性中定义函数过滤数组找出偶数computed:{evenNumber() {return this.numbers.filter(number => number % 2 === 0)}}}// 创建HelloVueApp应用,mount('#app') 将 Vue 应用 app 挂载到 <div id="app" class="demo">中Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果:
在这里插入图片描述
在这里插入图片描述

9. v-for/v-if 联合使用

联合使用 v-for/v-if 给 select 设置默认值v-for 循环出列表,v-if 设置选中值

  • 实例:选择框

    <!DOCTYPE html>
    <html>
    <head><meta charset="utf-8"><title>Vue 测试实例 v-for/v-if 联合使用 </title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    </head>
    <body>
    <!--创建一个id为app class为demo的div-->
    <div id="app" class="demo">
    <!--    设置选择框 v-mode实现单数据双向绑定 设置select改变--><select v-model="selOption" @change="changeVal($event)"><!--       在模板 <template> 中使用 v-for设置选择框v-for遍历列表--><template v-for="(site, index) in sites" :site="site" :index="index" :key="site.id">
    <!--            设置每个选项 索引为1设置默认值 索引值从0开始--><option v-if="index == 1" :value="site.name" selected>{{ site.name }}</option><option v-else :value="site.name">{{ site.name }}</option></template></select>
    <!--    设置div弹框--><div>您选中了:{{ selOption }}</div>
    </div><script>//    定义Vue应用HelloVueAppconst HelloVueApp = {data() {//     设置返回值return {// 默认选择selOption: "Runoob",sites: [{id: 1, name: "Google"},{id: 2, name: "Runoob"},{id: 3, name: "Taobao"}]}},//     利用方法属性实现选择函数methods: {// 参数:传入的选中选项changeVal: function (event){this.selOption = event.target.value;//     选中后弹出选择提示弹窗alert("你选中了" + this.selOption);}}}// 创建HelloVueApp应用,mount('#app') 将 Vue 应用 app 挂载到 <div id="app" class="demo">中Vue.createApp(HelloVueApp).mount('#app')
    </script>
    </body>
    </html>
    

    页面效果:重新选择会弹出弹窗提示
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

10. 扩展小计=====的区别

vue.js中:

  • == :用来比较或者判断两者是否相等,比较时可以自动转换数据类型
  • ===:用来较为严格的比较,除判断数据2这是否相等 ,还会判断两者数据类型是否相同 如不相同也不会转换数据类型 。返回(false)

11. 在组件上使用v-for实现todo-list

  • 在自定义组件上,你可以像在任何普通元素上一样使用 v-for:

      <my-component v-for="item in items" :key="item.id"></my-component>
    
  • 然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要使用 props

      <my-componentv-for="(item, index) in items":item="item":index="index":key="item.id"></my-component>
    
  • 不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

  • 下面是一个简单的 todo 列表的完整例子

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在组件上使用 v-for 实现to-do-list</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body><!--创建一个名为todo-list-example的div-->
<div id="todo-list-example">
<!--    在名为todo-list-example的div中定义form表单 --><form v-on:submit.prevent="andNewTodo">
<!--        定义label标签绑定到id为new-todo的输入框--><label for="new-todo">添加 todo</label>
<!--        输入框 v-model双向绑定数据 id为new-todo placeholder 例如:明天早上跑步--><input v-model="newToDoText" id="new-todo" placeholder="例如:明天早上跑步"/><button>添加</button></form>
<!--    todo-list--><ul>
<!--        使用自定义的todo-item组件--><todo-itemv-for="(todo, index) in todos":key="todo.id":title="todo.title"@remove="todos.splice(index, 1)"></todo-item></ul></div><script>
//    创建一个Vue应用app
const app = Vue.createApp({data() {// 设置返回数据return{newToDoText: '',todos: [{id: 1, title:'看电影'},{id: 2, title: '吃饭'},{id: 3, title: '上Runoob学习'}],nextTodoId: 4}},
//     利用methods定义函数实现添加to-do-listmethods: {andNewTodo() {this.todos.push({id: this.nextTodoId++,title: this.newToDoText})this.newToDoText = ''}}
})// 定义一个名为site-info的全局组件
app.component('todo-item', {
//     设置组件模板 点击删除按钮删除当前行的todo-listtemplate: `
<li>
{{ title }}
<button @click="$emit('remove')">删除</button>
</li>
`,
//     设置组件属性props: ['title'],emits:['remove']
})// 使用mount将HelloVueApp应用挂载到名为app的div上
app.mount('#todo-list-example')
</script></body>
</html>

页面效果:输入框填入内容,点击添加按钮,todo-list会增加一行,todo-list为空会添加一行空的todo-list
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode 第454题.四数相加II

给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 454. 四数相加 II - 力扣&#xff08;LeetCode&#xf…

大型语言模型,第 1 部分:BERT

一、介绍 2017是机器学习中具有历史意义的一年&#xff0c;当变形金刚模型首次出现在现场时。它在许多基准测试上都表现出色&#xff0c;并且适用于数据科学中的许多问题。由于其高效的架构&#xff0c;后来开发了许多其他基于变压器的模型&#xff0c;这些模型更专注于特定任务…

rust编译出错:error: failed to run custom build command for `ring v0.16.20`

安装 Visual Studio&#xff0c;确保选择 —.NET 桌面开发、使用 C 的桌面开发和通用 Windows 平台开发。显示已安装的工具链rustup show。然后通过运行更改和设置工具链rustup default stable-x86_64-pc-windows-msvc。 另外是想用clion进行调试rust 需要你按下面配置即可解…

Mental Poker- Part 2

在part-1中&#xff0c;我们梳理了去中心纸牌游戏所面临的挑战&#xff0c;也介绍了一种改进的Barnett-Smart协议&#xff0c;part-2将深入了解该协议背后涉及的算法。 Discrete-log VTMF VTMFs包含4部分&#xff1a;key generation, mask, remask and unmask&#xff0c;这些…

NFTScan 正式上线 TON NFTScan 浏览器!

2023 年 9 月 12 号&#xff0c;NFTScan 团队正式对外发布了 TON NFTScan 基础设施&#xff0c;将为 TON 生态的 NFT 开发者和用户提供简洁高效的 NFT 数据搜索查询服务。NFTScan 作为全球领先的 NFT 数据基础设施服务商&#xff0c;TON 是继 Bitcoin、Ethereum、BNBChain、Pol…

interview3-微服务与MQ

一、SpringCloud篇 &#xff08;1&#xff09;服务注册 常见的注册中心&#xff1a;eureka、nacos、zookeeper eureka做服务注册中心&#xff1a; 服务注册&#xff1a;服务提供者需要把自己的信息注册到eureka&#xff0c;由eureka来保存这些信息&#xff0c;比如服务名称、…

Unity Animation、Animator 的使用(超详细)

文章目录 1. 添加动画2. Animation2.1 制作界面2.2 制作好的 Animation 动画2.3 添加和使用事件 3. Animator3.1 制作界面3.2 一些参数解释3.3 动画参数 4. Animator中相关类、属性、API4.1 类4.2 属性4.3 API4.4 几个关键方法 5. 动画播放和暂停控制 1. 添加动画 选中待提添加…

Sudowrite:基于人工智能的AI写作文章生成工具

【 产品介绍】 名称 Sudowrite 成立/上线时间 2023年 具体描述 Sudowrite是一个基于GPT-3的人工智能写作工具&#xff0c;可以帮助你快速生成高质量的文本内容&#xff0c; 无论是小说、博客、营销文案还是学术论文。 Sudowrite可以根据你的输入和指…

八、MySql表的复合查询

文章目录 一、基本查询回顾二、多表查询&#xff08;一&#xff09;笛卡尔积的初步过滤&#xff08;二&#xff09;例子1.显示部门号为10的部门名&#xff0c;员工名和工资2.显示各个员工的姓名&#xff0c;工资&#xff0c;及工资级别 三、自连接&#xff08;一&#xff09;定…

pkg 打包 nodejs

一、先全局安装pkg npm i -g pkg 二、下载打包所需的 node-v16.16.0-linux-x64 和 node-v16.16.0-win-x64 下载地址&#xff0c;里面选择你需要的版本 三、放到pkg的缓存目录 windows&#xff1a;C:\Users\whh\.pkg-cache\v3.4&#xff0c;&#xff08;把whh替换为你的电脑…

【计算机网络】传输层协议——TCP(上)

文章目录 TCPTCP协议段格式报头和有效载荷如何分离&#xff1f;4位首部长度 TCP可靠性确认应答机制的提出序号和确认序号为什么序号和确认序号在不同的字段&#xff1f; 16位窗口大小 6个标志位标志位本质具体标志位PSHRSTURG 超时重传机制 文章目录 TCPTCP协议段格式报头和有效…

领域驱动设计:领域模型与代码模型的一致性

文章目录 领域对象的整理从领域模型到微服务的设计领域层的领域对象应用层的领域对象 领域对象与微服务代码对象的映射典型的领域模型非典型领域模型 DDD 强调先构建领域模型然后设计微服务&#xff0c;以保证领域模型和微服务的一体性&#xff0c;因此我们不能脱离领域模型来谈…

树控件、下拉框、文本框常用测试用例

01 控件的测试外观操作 1&#xff09;项目中的所有树是否风格一致 2&#xff09;树结构的默认状态是怎样的。比如默认树是否是展开&#xff0c;是展开几级&#xff1f; 是否有默认的焦点&#xff1f;默认值是什么&#xff1f;展开的节点图标和颜色&#xff1f; 3&#xff09…

Matlab之创建空数组的多种方法汇总

一、matlab空数组是什么&#xff1f; 在MATLAB中&#xff0c;空数组是指没有元素的数组对象。它可以用于占位或者作为容器&#xff0c;等待后续添加元素。 二、创建空数组的多种方法 1、使用空方括号 [] 创建空矩阵 A []; % 创建一个空双精度矩阵 B logical([]); % 创建一…

TypeScript类型系统层级

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 1. 顶层类型&#xff08;Top Type&#xff09; 1.1 any 类型 1.2 unknown 类型 2. 底层类型&#xff08;Bottom …

linux设备树节点添加新的复位属性之后设备驱动加载异常问题分析

linux设备树节点添加新的复位属性之后设备驱动加载异常问题分析 1 linux原始设备驱动信息1.1 设备树节点信息1.2 linux设备驱动1.3 makefile1.4 Kconfig1.5 对应的defconfig文件 2 修改之后的linux设备驱动2.1 修改之后的设备树节点信息2.2 原始test_fw.c出现的问题以及原因分析…

【Git】Git 快照 Snapshot

Git 快照 Snapshot 在对 Git 基础的学习过程中&#xff0c;我们了解了 Git 仓库的基本结构&#xff1a; 工作目录暂存区版本库&#xff0c;即 .git 仓库 下面我们就通过一次修改、暂存以及提交的工作流程&#xff0c;来理解快照&#xff08;Snapshot&#xff09;的概念。 现…

【C语言】每日一题(半月斩)——day1

目录 &#x1f60a;前言 一.选择题 1.执行下面程序&#xff0c;正确的输出是&#xff08;c&#xff09; 2.以下不正确的定义语句是&#xff08; &#xff09; 3.test.c 文件中包括如下语句&#xff0c;文件中定义的四个变量中&#xff0c;是指针类型的变量为【多选】&a…

The specified module could not be found.

新电脑运行项目的时候出现了某个包找不到的问题 \\?\D:\guanwnag\cloudquery-website\node_modules\.pnpm\nxnx-win32-x64-msvc16.5.3\node_modules\nx\nx-win32-x64-msvc\nx.win32-x64-msvc.node 引入的路径就感觉有问题 去github上查找原因&#xff0c;发现是没安装 Micro…

Anaconda下Jupyter Notebook执行OpenCV中cv2.imshow()报错(错误码为1272)网上解法汇总记录和最终处理方式

零、我设备的相关信息 Python 3.8.8Anaconda3 2021.05查询匹配python3.8.*的OpenCV匹配版本为&#xff1a;4.1.* — 4.2.*&#xff0c;我最后安装4.2.0.32版本如下我记录了 “从发现问题&#xff0c;到不断试错&#xff0c;最后解决问题” 的完整过程&#xff0c;以备自己复盘…