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

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

2023-07-16 67
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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.js框架
vue学习VUE.js
学习VUE.js
指令VUE.js
vue指令VUE.js
t75yjb52rsccc
目录
相关文章
程序员彭于晏
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
34 1
阿里巴巴叫我来巡山
|
6天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
57 17
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
41 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
30 1
程序员成长之路
|
1月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
程序员成长之路
48 1
九月天空
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
29 1
G0518
|
1月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
G0518
32 1
大树营养快线
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
32 2
程序员彭于晏
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
42 0
程序员彭于晏
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
程序员彭于晏
44 0

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    VUE3中watch与watchEffect —— 全网最详细系列
  • 3
    vue中关于element的el-image 图片预览功能增加一个下载按钮
  • 4
    Vue3——使用v-if或v-show来实现过渡的动画效果
  • 5
    中文代码示例之Vuejs入门教程(一)
  • 6
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 7
    vue中如何获取到当前位置的天气
  • 8
    vue3.0 bpmn-js + TS 简易教程
  • 9
    基于springboot+vue的医院预约系统(前后端分离)
  • 10
    Vue表格显示问题：v-show无法影响el-table-column列的解决方案
  • 1
    使用Vue.js构建交互式前端的技术探索
    92
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    170
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    133
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    151
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    193
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    112
  • 7
    vue3中使用动态组件
    108
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    146
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    77
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    125

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks售前咨询