AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-07-16 221
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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  的内容  

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-10 10:36:03
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-10 10:49:47
 * @FilePath: \com.Html\Com.Vue\模板语法\html\V-if条件.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!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>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <h1>{{text}}</h1>
        <h1 v-if="score>90">{{score}}</h1>
        <h1 v-if="score>80">{{score}}</h1>
        <!--! V-show -->
        <h1 v-show="score>90">{{score}}</h1>
        <h1 v-else>{{message}}</h1>
    </div>
    <div id="app"  v-else>
        <h1>{{message}}</h1>
        <h1>{{text}}</h1>
        <h1 v-if="score>90">{{score}}</h1>
        <h1 v-if="score>80">{{score}}</h1>
        <!--! V-show -->
        <h1 v-show="score>90">{{score}}</h1>
        <h1 v-else>{{message}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        function FistFunctionFmethod() {
            alert("开始学习Vue.js")
            const app = Vue.createApp({
                template:`<h1>123456789</h1>`,
                data: function () {
                    return {
                        message: "数据内容一",
                        text: "数据内容二",
                        score: 90,
                        isShow:true,
                    }
                },
                methods: {
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()
    </script>
</body>
</html>

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

在V-for中 数组是如何遍历出来的？

在V-for中 对象是如何遍历出来的？

在V-for中 数组中套用对象的数据类型该如何遍历 ？

在V-for中 对象中套用的数组的数据信息该如何拿到？

利用V-for如何动态的创建表格的信息？

思考一下 我为什么要讲 V-for指令重点来讲？

思考一下 是现有数据 还是现有数组的 ？

单个数据 多个数据 类型不同 该如何存放？

如果是在对象中套用数组在数组中套用对象复杂的数据类型该如何显示呢？

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

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-10 11:13:24
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-10 19:10:10
 * @FilePath: \com.Html\Com.Vue\模板语法\html\V-for.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!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>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item,index in meage">{{index+'_'+item}}</li>
        </ul>
        <ul>
            <li v-for="item,index,idx in object">{{idx+'_'+item+'_'+index}}</li>
        </ul>
        <p v-for="index in object.age">{{index}}</p>
        <p v-for="item,index in object.name">{{item+"_"+index}}</p>
        <ul>
            <template v-for="item,index,idx in object">
                <li>{{idx+'_'+item+'_'+index}}</li>
            </template>
        </ul>
        <div>
            <template v-for="item,index,idx in object":key="index+''">
                <li>{{idx+'_'+item+'_'+index}}</li>
            </template>
        </div>
    </div>
    <script src="./"></script>
    <script>
        function FistFunctionFmethod() {
            alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        meage: ["ABC", "ERT", "GHU"],
                        object: {
                            name: 'shimpoy',
                            age: 23,
                            sex: '男',
                            height: "190",}
                    }
                },
                methods: {
                    update: function () {
                        for (var i in this.meage) {
                            console.log(i)
                        }
                        this.meage.forEach(function (item, index, arr) {
                        })
                    }
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()
    </script>
</body>
</html>

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

第一点:数组的遍历

 

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

   <!-- !对象的遍历方式 -->
   <ul>
       <li v-for="item,index in message">{{"下标"+index+'属性值'+item}}</li>
   </ul>

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》",
         ]
     }

  <!-- 对象中套用数组该如何调用 -->
  <!-- 如果是对象 -->
  <p v-for="item,index,idx in objectNum" class="big">
      {{'编号'+idx+'&nbsp;&nbsp;对象的值'+item+'&nbsp;&nbsp;对象的属性'+index}}
      <p>{{objectNum.id}}</p>
      <!-- 从对象中找到数组在按照下标拿出数据 -->
      <p>{{objectNum.book[2]}}</p>
  </p>

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

<!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>
</head>
<style>
    * {
        font-size: 20px;
    }
    h1{
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: red;
        background-color: rgb(255, 255, 255);
        /* opacity: 0.6; */
    }
    li {
        border: 1px solid red;
        height: 60px;
        float: left;
        width: 16%;
        list-style: none;
    }
    button {
        background-color: aliceblue;
        color: lightcoral;
        width: 200px;
        border-radius: 23px;
    }
    .big {
        width: 19%;
        border-left: 1px solid green;
    }
    .one {
        width: 100%;
    }
    table {
        width: 80%;
        margin: auto;
        border: 2px solid black;
    }
    td {
        width: 20%;
        height: 30%;
        background-color: rgb(202, 255, 213);
        color: red;
    }
</style>
<body>
    <div id="app">
        <!-- !对象的遍历方式 -->
        <ul>
            <li v-for="item,index in message">{{"下标"+index+'属性值'+item}}</li>
        </ul>
        <h1>数组的遍历 是一个一个的值 </h1>
        <ul>
            <!--!数组的遍历方式 -->
            <li v-for="item in message" :>{{item}}</li>
        </ul>
        <button @click="add">我是数组的遍历方式</button>
        <div>
            <ul>
                <!-- 编号 值 属性 -->
                <li v-for="item,index,idx in object" class="big">
                    {{'编号'+idx+'&nbsp;&nbsp;对象的值'+item+'&nbsp;&nbsp;对象的属性'+index}}</li
                <li v-for="item,index,idx in object1" class="big">
                    {{'编号'+idx+'&nbsp;&nbsp;对象的值'+item+'&nbsp;&nbsp;对象的属性'+index}}</li>
                <li v-for="item,index,idx in object3" class="big">
                    {{'编号'+idx+'&nbsp;&nbsp;对象的值'+item+'&nbsp;&nbsp;对象的属性'+index}}</li>
                <li v-for="item,index,idx in object4" class="big">
                    {{'编号'+idx+'&nbsp;&nbsp;对象的值'+item+'&nbsp;&nbsp;对象的属性'+index}}</li>
                <li v-for="item,index,idx in object5" class="big">
                    {{'编号'+idx+'&nbsp;&nbsp;对象的值'+item+'&nbsp;&nbsp;对象的属性'+index}}</li>
            </ul>
        </div>
        <h1>对象的遍历方式</h1>
        <!--!数组中有对象如何遍历-->
        <!-- 第一步 我创建一个数组 -->
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身高</th>
                <th>书本</th>
            </tr>
            <!-- item,index -->
            <tr v-for="item,index in Big">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.height}}</td>
                <td><button>增加</button></td>
                <td><button>删除</button></td>
                <td><button>修改</button></td>
            </tr>
        </table>
        <h1>数组与对象的探索历程</h1>
        <!-- 对象中套用数组该如何调用 -->
        <!-- 如果是对象 -->
        <p v-for="item,index,idx in objectNum" class="big">
            {{'编号'+idx+'&nbsp;&nbsp;对象的值'+item+'&nbsp;&nbsp;对象的属性'+index}}
            <p>{{objectNum.id}}</p>
            <!-- 从对象中找到数组在按照下标拿出数据 -->
            <p>{{objectNum.book[2]}}</p>
        </p>
    </div>
    <!-- <script src="../Day03Vue/js/vue.js"></script> -->
    <!-- <script src="https://unpkg.com/vue@next"></script>
     -->
    <script src="./js/vue.js"></script>
    <script>
        function FistFunctionFmethod() {
            // alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        message: ["我是数据onOne1", "我是数据onOne2", "我是数据onOne3", "我是数据onOne4"],
                        object: {
                            id: "90081",
                            name: "我是对象对象的属性为姓名",
                            age: "23",
                            sex: "男",
                            height: "1.78cm",
                            book: '狼人的诱惑'
                        },
                        object1: {
                            id: "90082",
                            name: "我是对象对象的属性为姓名",
                            age: "45",
                            sex: "男",
                            height: "1.79cm",
                            book: '狼人的诱惑'
                        },
                        object3: {
                            id: "90083",
                            name: "我是对象对象的属性为姓名",
                            age: "2345",
                            sex: "男",
                            height: "1.78cm",
                            book: '狼人的诱惑'
                        },
                        object4: {
                            id: "90084",
                            name: "我是对象对象的属性为姓名",
                            age: "2345",
                            sex: "男",
                            height: "1.78cm",
                            book: '狼人的诱惑'
                        },
                        object5: {
                            id: "90085",
                            name: "我是对象对象的属性为姓名",
                            age: "2345",
                            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》",
                            ]
                        }
                    }
                },
                methods: {
                    add: function () {
                        alert("111")
                        this.message.splice(2, 0, "P")
                    }
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()
    </script>
</body>
</html>


文章标签：
JavaScript
关键词：
vue框架VUE.js
指令VUE.js
框架指令VUE.js
vue指令VUE.js
VUE.js框架
t75yjb52rsccc
目录
相关文章
34789737
|
4月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
383 2
哇塞女孩
|
3月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
352 137
谢妹纸
|
7月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
874 0
我们是幸福一家人
|
7月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
388 82
rvblio6ca4cug
|
6月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
509 1
34789737
|
6月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
333 0
34789737
|
7月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
523 17
34789737
|
7月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
338 1
34789737
|
7月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
666 0
34789737
|
7月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
328 0

热门文章

最新文章

  • 1
    SpringCloud微服务实战——搭建企业级开发框架（四十一）：扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
  • 2
    Vue 目录结构 vite 项目
  • 3
    vue3中结合egg实现jsonp跨域请求
  • 4
    将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起（Vue实战系列）
  • 5
    Vue3中使用rem布局
  • 6
    Vue 利用Canvas标签实现动态验证码校验（前端必备附源码）
  • 7
    Vue如何读取cookie实现路由守卫（检查用户登录状态）
  • 8
    【Spring + Vue前后端分离】可商用的开源后台管理框架软件eladmin剖析
  • 9
    【vue2小知识】路由守卫的使用与解决RangeError: Maximum call stack size exceeded问题的报错。
  • 10
    前端必知词汇：Vue.js
  • 1
    Vue 3性能优化
    307
  • 2
    vue中的keep-alive问题（2）
    352
  • 3
    Vue 3
    641
  • 4
    vue3使用ts传参教程
    352
  • 5
    基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
    477
  • 6
    Vue中如何实现兄弟组件之间的通信
    383
  • 7
    虚拟列表在Vue3中的具体应用场景有哪些？
    542
  • 8
    除了循环引用，Vue3还有哪些常见的性能优化技巧？
    315
  • 9
    在 Vue 中，如何在回调函数中正确使用 this？
    333
  • 10
    vue3循环引用自已实现
    149

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    【DataEase】零代码数据可视化分析工具的安装部署保姆级教程