本篇讲列表渲染, 主要是对 v-on 指令配合 v-if 和一些数组相关的方法来体验 vue 的模板渲染方法.

数组元素的渲染

<!DOCTYPE html>

<html lang="en">

<head>

  <title>列表渲染</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

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

  <script>

    const app = Vue.createApp({

      data () {

        return {

          listArray: ['hello', 'world', 'youge', 'cool']

        }

      },

      template: `

      <div

		v-for="(item, index) in listArray"

		:key="index

	  >

		{{item}}--{{index}}</div>

      `

    })

  const vm = app.mount('#root')

  </script>

</body>

</html>

主要还是对 v-on 的使用罢了.

hello--0

world--1

youge--2

cool--3

对象元素的渲染

<!DOCTYPE html>

<html lang="en">

<head>

  <title>列表对象渲染</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

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

  <script>

    const app = Vue.createApp({

      data () {

        return {

          listObject: {

            firstName: 'you',

            lastName: 'ge',

            job: 'marketing'

          }

        }

      },

      template: `

      <div

        v-for="(value, key, index) in listObject"

        :key="index"

      >

        {{value}}--{{key}}--{{index}}

      </div>

      `

    })

  const vm = app.mount('#root')

  </script>

</body>

</html>


you--firstName--0

ge--lastName--1

marketing--job--2

结合数组 & 对象 方法来演示

就纯复习一下数组, 对象的一些增删改查的基本方法而已.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>综合案例</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

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

  <script>

    const app = Vue.createApp({

      data () {

        return {

          listArray: ['hello', 'world', 'youge', 'cool'],

          listObject: {

            firstName: 'dell',

            lastName: 'lee',

            job: 'teacher'

          }

        }

      },

      methods: {

        addItemClick () {

          // 1. 数组变更函数: push, pop, shift, unshift, splice...

          // this.listArray.push('cj')

          // this.listArray.pop();

          // this.listArray.shift();

          // this.listArray.unshift('cj');

          // this.listArray.splice(1, 2);

          // this.listArray.sort();

          // this.listArray.reverse();

          // 2. 直接替换数组(函数式编程)

          // this.listArray = ['aa', 'bb', '中国'];

          // this.listArray = ['bye', 'world'].filter(item => item == 'bye');

          //3. 直接更新数组内容

          // this.listArray[1] = 'youge';

          // 对象: 新增

          this.listObject['age'] = 18;

          this.listObject.sex = 'male'

        }

      },

      template: `

      <div>

        <template

         v-for="(value, key, index) in listObject"

            :key="index"

          >

            <div v-if="key != 'lastName'">

            {{value}} -- {{key}}

          </div>

        </template>

        <div v-for="item in 5">{{item}}</div>

        <button @click="addItemClick">新增</button>

      </div>

    `

    })

  const vm = app.mount('#root')

  </script>

</body>

</html>

列表渲染这个在实际应用中应该是最高频的了, 尤其是对后端数据进行渲染就必然会用到这个 v-for 相关的啦.

vue3 基础-列表渲染的更多相关文章

  1. vue基础——列表渲染

    列表渲染 用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据 ...

  2. vue基础---列表渲染

    首先简单回顾下v-for‘指令 <ol id="list_area"> <li v-for="book in books">{{book ...

  3. 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...

  4. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  5. Vue 基础自查——条件渲染和列表渲染

    v-if和v-show的区别是什么? v-if和v-for为什么不能一起用? v-for中的key有什么作用? 1 v-if 和 v-show 1.1 作用 都用来控制元素的显示和隐藏 1.2 控制元 ...

  6. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  7. 前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器

    一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...

  8. Vue入门系列（三）之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  9. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  10. 【03】Vue 之列表渲染及条件渲染

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

随机推荐

  1. 当ABB机器人外部轴驱动器过流维修

    一.过流故障原因分析 电机负载异常 当ABB机器人外部轴驱动器所承受的负载超过其额定值时,电机需要产生更大的转矩以维持运行,从而导致电流增大.例如,在一些自动化生产线上,如果外部轴需要搬运的物品重量突 ...

  2. CentOS安装nginx服务器及配置反向代理

    以下是在CentOS上安装nginx服务器并配置反向代理的步骤: 更新系统软件包: sudo yum update 安装nginx: sudo yum install nginx 启动nginx服务: ...

  3. C语言线程池的常见实现方式详解

    在 C 语言中,线程池通常通过 pthread 库来实现.以下是一个详细的说明,介绍了 C 语言线程池的常见实现方式,包括核心概念.实现步骤和具体的代码示例. 点击查看代码 1. 线程池的基本结构 线 ...

  4. C#之 Dictionary 详解

    基本概念 Dictionary<TKey, TValue>是C#中用于存储键值对集合的泛型类,属于System.Collections.Generic命名空间.它允许使用键(Key)来访问 ...

  5. My'Bug

    修改时未校验工作经历是否为空

  6. HTTP 尝试获取 Client IP

    HTTP 中获取 Client IP 相关策略需求, 在当下网络环境中多数只能提供建议作用. 更多的是 通过其它唯一标识来挖掘更多潜在价值. 本文主要就一个内容, 如何最大可能尝试在 HTTP 请求中 ...

  7. pip和pip3如何更新

    pip pip install --upgrade pip pip3 pip3 install --upgrade pip

  8. GitFlow ⼯作流

    前言 Git 是一个开源分布式版本控制系统,它可以很方便的帮我们记录文件的改动,就像下面一样: 我们可以很快的跳到文件改动的某一个版本(就像时空穿梭一样). Git 在程序开发中,作为一个源码管理系统 ...

  9. ffmpeg合并时音画不同步问题及音频软编码实现记录

    最近因为耳机3.5mm接口的一些干扰问题,舍弃了之前的接入方式,需要重新实现网络音频流的接入,在这个过程中遇到了一些问题,特来记录一下~ 一.网络音频流的接入 这个音频流来源各不相同,我这里是udp广 ...

  10. Windows 10右键添加 "在此处打开命令窗口" 菜单

    1.添加右键菜单的两种效果: 第一种是在 桌面/文件夹窗口中/选中文件夹上直接点击右键,显示"在此处打开命令窗口"选项,如图: 第二种是在 桌面/文件夹窗口中/选中文件夹上按住Sh ...