Vue框架的学习(Vue的基础指令操作二 V-For)第二课_资讯

Vue框架的学习(Vue的基础指令操作二 V-For)第二课

创始人

2024-01-20 19:05:12

0次

今天的任务理解下面的几个指令操作重点在V-for上

V-if V-else V-show V-For 本文章的重心放在V-For 从数据到数组到对象一步一步的去查找底层的原理

v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件下面是 V-if V-else V-show 的内容


Document
{{message}}
{{text}}
90">{{score}}
80">{{score}}
90">{{score}}
{{message}}
{{message}}
{{text}}
90">{{score}}
80">{{score}}
90">{{score}}
{{message}}

V-For指令思考下面的几个问题

在V-for中数组是如何遍历出来的？
在V-for中对象是如何遍历出来的？
在V-for中数组中套用对象的数据类型该如何遍历？
在V-for中对象中套用的数组的数据信息该如何拿到？
利用V-for如何动态的创建表格的信息？
思考一下我为什么要讲 V-for指令重点来讲？
思考一下是现有数据还是现有数组的？
单个数据多个数据类型不同该如何存放？
如果是在对象中套用数组在数组中套用对象复杂的数据类型该如何显示呢？

来个小案例理解数组对象该如何遍历信息的



Document
{{index+'_'+item}}
{{idx+'_'+item+'_'+index}}
{{index}}
{{item+"_"+index}}

下面这个案例带你去解决上面所提到的基础问题下面吧效果图展示一下

第一点:数组的遍历

  message: ["我是数据onOne1", "我是数据onOne2", "我是数据onOne3", "我是数据onOne4"]

   {{"下标"+index+'属性值'+item}}

第二点对象的遍历

  const app = Vue.createApp({data: function () {return {message: ["我是数据onOne1", "我是数据onOne2", "我是数据onOne3", "我是数据onOne4"],object: {id: "90081",name: "我是对象对象的属性为姓名",age: "23",sex: "男",height: "1.78cm",book: '狼人的诱惑'},

第三点数组中套用对象

   Big: [{id: "900801",name: "我是对象对象的属性为姓名",age: "15",sex: "男",height: "1.78cm",book: '狼人的诱惑'}, {id: "90082",name: "我是对象对象的属性为姓名",age: "25",sex: "男",height: "1.78cm",book: '狼人的诱惑'}, {id: "90083",name: "我是对象对象的属性为姓名",age: "2345",sex: "男",height: "1.78cm",book: '狼人的诱惑'}, {id: "90084",name: "我是对象对象的属性为姓名",age: "2345",sex: "男",height: "1.78cm",book: '狼人的诱惑'}, {id: "90085",name: "我是对象对象的属性为姓名",age: "2345",sex: "男",height: "1.78cm",book: '狼人的诱惑'}],

为了更好的展示出来我用表格的形式展示出来了如下图所示这才是我们学习框架的目的

第四点对象中套用数组

     objectNum: {id: "1001",name: "数组中调用对象该如何调用",age: "17",sex: "男",height: "1.78cm",book: ["《星辰大海1》","《星辰大海2》","《星辰大海3》","《星辰大海4》",]}

  {{'编号'+idx+'  对象的值'+item+'  对象的属性'+index}}
{{objectNum.id}}
{{objectNum.book[2]}}

数组和对象的用法有很多我只是将常用的方式表达出来下面吧完整的d代码放在下面


Document

{{"下标"+index+'属性值'+item}}
数组的遍历 是一个一个的值 
{{item}}
{{'编号'+idx+'  对象的值'+item+'  对象的属性'+index}}{{'编号'+idx+'  对象的值'+item+'  对象的属性'+index}}
{{'编号'+idx+'  对象的值'+item+'  对象的属性'+index}}
{{'编号'+idx+'  对象的值'+item+'  对象的属性'+index}}
{{'编号'+idx+'  对象的值'+item+'  对象的属性'+index}}
对象的遍历方式
编号 姓名 年龄 性别 身高 书本
{{item.id}} {{item.name}} {{item.age}} {{item.sex}} {{item.height}} 
数组与对象的探索历程
{{'编号'+idx+'  对象的值'+item+'  对象的属性'+index}}
{{objectNum.id}}
{{objectNum.book[2]}}

编号	姓名	年龄	性别	身高	书本
{{item.id}}	{{item.name}}	{{item.age}}	{{item.sex}}	{{item.height}}

上一篇：【读论文】DDcGAN

下一篇：OpenGL之纹理映射

Vue框架的学习(Vue的基础指令操作二 V-For)第二课

今天的任务理解下面的几个指令操作重点在V-for上

V-if V-else V-show V-For 本文章的重心放在V-For 从数据到数组到对象一步一步的去查找底层的原理

v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件下面是 V-if V-else V-show 的内容

{{message}}

{{text}}

90">{{score}}

80">{{score}}

90">{{score}}

{{message}}

{{message}}

{{text}}

90">{{score}}

80">{{score}}

90">{{score}}

{{message}}

V-For指令思考下面的几个问题

来个小案例理解数组对象该如何遍历信息的

下面这个案例带你去解决上面所提到的基础问题下面吧效果图展示一下

第一点:数组的遍历

第二点对象的遍历

第三点数组中套用对象

为了更好的展示出来我用表格的形式展示出来了如下图所示这才是我们学习框架的目的

第四点对象中套用数组

数组和对象的用法有很多我只是将常用的方式表达出来下面吧完整的d代码放在下面

数组的遍历是一个一个的值

对象的遍历方式

数组与对象的探索历程

相关内容

热门资讯

Vue框架的学习(Vue的基础指令操作二 V-For)第二课

今天的任务理解下面的几个指令操作 重点在V-for上

V-if V-else V-show V-For 本文章的重心放在V-For 从数据到数组到对象一步一步的去查找 底层的原理

v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件 下面是 V-if V-else V-show 的内容

{{message}}

{{text}}

90">{{score}}

80">{{score}}

90">{{score}}

{{message}}

{{message}}

{{text}}

90">{{score}}

80">{{score}}

90">{{score}}

{{message}}

V-For指令 思考下面的几个问题

来个小案例 理解数组对象该如何遍历信息的

下面这个案例 带你去解决上面所提到的基础问题 下面吧效果图展示一下

第一点:数组的遍历

第二点 对象的遍历

第三点 数组中套用对象

为了更好的展示出来我用表格的形式展示出来了 如下图所示 这才是我们学习框架的目的

第四点 对象中套用数组

数组和对象的用法有很多我只是将常用的方式表达出来 下面吧完整的d代码放在下面

数组的遍历 是一个一个的值

对象的遍历方式

数组与对象的探索历程

相关内容

热门资讯

今天的任务理解下面的几个指令操作重点在V-for上

V-if V-else V-show V-For 本文章的重心放在V-For 从数据到数组到对象一步一步的去查找底层的原理

v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件下面是 V-if V-else V-show 的内容

V-For指令思考下面的几个问题

来个小案例理解数组对象该如何遍历信息的

下面这个案例带你去解决上面所提到的基础问题下面吧效果图展示一下

第二点对象的遍历

第三点数组中套用对象

为了更好的展示出来我用表格的形式展示出来了如下图所示这才是我们学习框架的目的

第四点对象中套用数组

数组和对象的用法有很多我只是将常用的方式表达出来下面吧完整的d代码放在下面

数组的遍历是一个一个的值