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

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

2023-07-16 59
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
我是快乐的嘟嘟
|
8天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
76 26
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
18 3
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
15 2
我是快乐的嘟嘟
|
22天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
120 63
html的七十二变
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
28 8
html的七十二变
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
24 7
html的七十二变
|
8天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
26 5
html的七十二变
|
9天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
27 5
html的七十二变
|
9天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
20 4
游客zi3qmblbcdexu
|
14天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
36 6

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 4
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 5
    自制简单的range（Vue）
  • 6
    vite原理之解析.vue文件
  • 7
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 8
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 9
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 10
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 1
    深入了解前端框架Vue.js的响应式原理
    52
  • 2
    Vue3 五天速成（下）
    67
  • 3
    Vue3 五天速成（中）
    59
  • 4
    Vue3 五天速成（上）
    86
  • 5
    vue3版本的爱心源码
    25
  • 6
    Vue当前时间与接口返回时间的判断
    48
  • 7
    vue生成动态表单
    33
  • 8
    Vue生成Canvas二维码
    41
  • 9
    vue项目切换页面白屏的解决方案
    154
  • 10
    Vue3 项目中怎么使用 jsx——易懂
    44

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问