【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue语法基础：列表循环渲染

最新推荐文章于 2023-09-28 19:22:10 发布
最新推荐文章于 2023-09-28 19:22:10 发布
阅读量497 收藏
点赞数
分类专栏： Vue.js 文章标签： vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/118070449
版权

文章目录

7、列表循环渲染

使用v-for渲染数组

<!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>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!",
        list: ["大哥刘备", "二哥关羽", "三哥张飞", "四哥赵云"]
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <div v-for='(item, index) in list'>
            {{ item }} -- {{ index }}
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612200822736.png

使用v-for渲染对象

<!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>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!",
        object: {
          one: "大哥刘备",
          two: "二哥关羽",
          three: "三哥张飞",
          four: "四哥赵云"
        }
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <div v-for='(value, key, index) in object'>
            {{ key }} -- {{ value }} -- {{ index }}
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612201355510.png

使用key优化性能

<!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>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!",
        list: [1, 2, 3, 4]
      }
    },
    methods: {
      addItem(){
        this.list.push(1000);
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    // 我们在添加新的元素的时候，vue 会智能决定渲染（创建）的内容
    // 没有改变的内容不渲染，复用原来的，新增加的内容就渲染
    // 但是，并非所有的时候 vue 都能准确判断一个元素是否是新的
    // 我们需要使用 :key 来绑定一个“唯一”的值，来帮助 vue 判断
    // 如果有相同的值就复用之前的 DOM 反之创建新的
    // 这个 key 一般不用 index ，因为每个元素对应的 index 都不一样
    // 就导致用了等于没用（这点比较偏向 vue 的底层）
    template: `
        <div v-for='(item, index) in list' :key="item">
            {{ item }} -- {{ index }}
        </div>
        <button @click="addItem">addItem</button>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612202721696.png

控制数组

此外，我们可以通过控制数组来控制列表的渲染，这里就暂且省略了；

给对象添加属性

<!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>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!",
        object: {
          one: "大哥刘备",
          two: "二哥关羽",
          three: "三哥张飞",
          four: "四哥赵云"
        }
      }
    },
    methods: {
      addAttrs(){
        this.object.five = "柏拉图";
        this.object.six = "苏格拉底";
        this.object.seven = "亚里士多德";
      }
    
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <div v-for='(value, key, index) in object'>
            {{ key }} -- {{ value }} -- {{ index }}
        </div>
        <button @click="addAttrs">add</button>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612205508685.png

循环n次

<!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>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <div v-for='item in 10'>
          {{message}}
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612205724722.png

指定某元素不显示

可灵活运用，但是不要将 v-for 和 v-if 下载一个标签里，v-for 的权限更高！

<!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>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <div v-for='item in 10'>
          <div v-if="item!=8">{{item}}</div>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612210125000.png

存在问题

image-20210612210331252.png

解决问题：使用template

使用 template 代替 div ， template 只是一个占位符！

<!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>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <template v-for='item in 10'>
          <div v-if="item!=8">{{item}}</div>
        </template>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612210548947.png

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js 3.0从入门到实战【配套资源】.zip
06-24
Vue.js 3.0从入门到实战【配套资源】.zip
VUE3从入门到精通
最新发布
p6448777的博客
05-03 567
****************************************************************************方式二，就是$emit传递。*************************************************************************配置webpack.config.js！padding: 3px 0" type="text" @click="back">返回</el-button>
【Vue3 从入门到实战 进阶式掌握完整知识体系】001-Vue语法初探
訾博（ZiBo）的博客
06-17 704
文章目录一、Vue语法初探1、第一个Vue程序hello world 代码运行结果我们在模板里面写一个变量运行结果使用mounted函数运行结果这告诉我们什么？2、反转字符串代码运行结果3、显示与隐藏代码显示状态隐藏状态4、了解循环和双向绑定代码运行结果往列表里面添加新的数据运行结果来点更有意思的运行结果5、组件概念初探先了解一下v-bind指令运行结果关于组件运行结果让组件灵活起来运行结果 一、Vue语法初探 1、第一个Vue程序 hello world 代码 <!DOCTYPE html>
Vue3实战教程（快速入门）
张伟的专栏
07-14 1973
本教程通过搭建一个简单项目，帮助读者快速入门Vue3项目实战，掌握Vue3、TS、Element Plus、axios等技术栈。推荐内容Vue3 和 Vue2 的几个明显的区别：（1）Vue2使用的选项式API，Vue3使用的是组合式API。前者随着项目页面体积的增大，对于代码的管理会给使用者带来更大的心智负担；后者组合式的写法，将data和methods等组合在一起，更容易理解和使用。不过对于初学者而言，可能会有些不太适应。
vue3从入门到实战 吾爱,vue3从入门到实战
aifans_bert的博客
09-09 1109
接下来增强dialog组件动画，代码如下: //省略exportdefault{data(){return{ isShow:true}},methods:{handleCancel(){ this.isShow=false this.$emit('cancel')},handleOk(){ this.isShow=true this.$emit('ok')},},}可以看到transition组件接收了一个nameprops，那么怎么编写css完成动画呢？2.掌握移动端开发原理，理解原生开发和混合开发。
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
热门推荐
m0_67844671的博客
09-28 1万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
Vue3百度网盘下载链接
weixin_45710998的博客
12-26 7068
链接：https://pan.baidu.com/s/1QSft0I4jIjy9tFRfFxmVHQ 提取码：wh2k 复制这段内容后打开百度网盘手机App，操作更方便哦
Vue3 从入门到实战 进阶式掌握完整知识体系
m0_73617968的博客
09-07 390
了解的都知道，我这么不思进取的人怎么可能突发奇想的去了解一个工作中没用过的类，不出意外的，还是在今天做 LeetCode 347. 前 K 个高频元素题的时候，尝试了几次都不知道怎么做，看评论区发现这道题实际上应该是使用 优先级队列 来做，我才知道有优先级队列这么个东西。优先级队列，依旧是 顾名思义，优先级队列会自动按照元素的权值排列，也就是说，优先级队列其实有反 先进先出规则，但是其对外接口依旧是从队头取元素，队尾添加元素，再无其他存取方式，看起来就是一个队列。优先级队列其实是一个 披着队列外皮的堆。
【Vue3 从入门到实战 进阶式掌握完整知识体系】033-Composition API：使用 Composition API 开发TodoList
訾博（ZiBo）的博客
07-01 115
文章目录4、使用 Composition API 开发TodoList实现简单的添加列表运行结果封装优化运行结果 4、使用 Composition API 开发TodoList 实现简单的添加列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt
vue3基础学习完整
m0_62783212的博客
06-28 118
vue学习笔记
从零开始VUE3（基础篇）
WPSir的博客
03-15 1272
vue3.0-practice-room vue3.0学习仓，记录，爬坑，实践，分享 一、使用vue-cli4.5+安装VUE3.0 1.首先需要按照原始搭建模式下载vue脚手架 npm install -g @vue/cli vue create vue3.0-practice-room 2.选择安装3.0版本vue（vue-cli，4.5版本已有此选项，往前版本未测试） 在Choose a version of Vue.js that you want to start the
Vue3的从入门到实战的培训教程大纲
YunWisdom
07-13 2102
Vue框架概述Vue3的新特性安装与配置Vue3Vue实例与模板语法组件开发。
1. Vue3入门--黑马程序员实战笔记
qq_52338998的博客
05-15 594
通过 Counter 案例 体验Vue3新引入的组合式API。
全网最全的vue3入门教程『图文并茂』
linwu的博客
08-05 6706
Vue 3 是一个流行的开源JavaScript框架，用于构建用户界面和单页面应用。它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式 API，以及一些新的内置组件。你可以创建自定义的hooks来复用代码。一个自定义hook就是一个函数，它可以使用其他的响应式数据和组合式API。import {setup() {你可以使用customRef函数来创建一个自定义的响应式引用。这允许你控制和观察当引用的值发生变化时的行为。
【vue3+ts、webpack5资源】
m0_61702149的博客
06-24 335
vue3 + ts
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 学习笔记
qq_35072197的博客
04-15 733
百度云----链接：https://pan.baidu.com/s/14rRich_qHUQguIVyCRRfJQ?阿里云----https://www.aliyundrive.com/s/tWFUbEer5Gs 提取码: nd59。----https://cloud.189.cn/t/267Jf2jMVzEz (访问码:xj8s)因为他们总结的图文并茂，自己也没有继续写的必要了，可以当一个很好的参考资料。大家好，老师的笔记拿到了，给大家快速拿到。
Vue.js入门：声明式渲染与核心功能实战
Vue.js语法攻略深入解析 Vue.js是一款强大的前端框架，它以其声明...理解这些基础概念是掌握Vue.js开发的第一步，后续还可以深入学习更高级的主题，如组件化开发、响应式系统、父子组件通信等，以构建复杂的Web应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值