本篇讲列表渲染, 主要是对 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. 用 C# 插值字符串处理器写一个 sscanf

    插值字符串处理器 C# 有一个特性叫做插值字符串,使用插值字符串,你可以自然地往字符串里面插入变量的值,比如:$"abc{x}def",这一改以往通过 string.Format ...

  2. 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎，没有生成长度限制，DeepSeek本体的替代品，可本地部署+知识库，注册即可有750w的token使用

    最近火山引擎推出了自家联网版的DeepSeekR1,并且加入了联网的功能,不用担心DeepSeek本体的服务器繁忙了,可以说直接是DeepSeek本体的替代品.现在注册即送30块体验价(相当于750w ...

  3. rgba颜色转换为十六进制

    RGBA颜色转HEX 转换步骤: 先将r.g.b分别转换为十六进制,比如 r.g.b分别为 255,则转换后得到的为 FF.FF.FF 将a 乘以 255,然后获得的积的整数部分转换为十六进制,如 a ...

  4. Typecho如何去掉/隐藏index.php

    Typecho后台设置永久链接后,会在域名后加上index.php,很多人都接受不了.例如如下网址:https://www.jichun29.cn/index.php/archives/37/,但我们 ...

  5. MyBatisPlus - [07] Q&A

    题记部分 001 || Public Key Retrieval is not allowed 通常出现在使用JDBC连接数据库时,特别时在尝试通过SSL/TLS加密连接到MySQL或MariaDB数 ...

  6. 【资源分享】Latex mathematical symbol

    https://files.cnblogs.com/files/blogs/705982/symbols.zip?t=1660463874 上面这个是pdf版,把这个压缩包下载之后,后缀改为pdf即可 ...

  7. Web前端入门第 14 问：HTML 语义化是什么？

    HELLO,这里是大熊学习前端开发的入门笔记. 本系列笔记基于 windows 系统. 语义化:通俗地说,就是让机器可以理解编写出来的 HTML 代码.比如:搜索引擎.屏幕阅读器等. 非语义化写法 网 ...

  8. js回忆录（2） -- 逻辑表达式，条件语句

    之所以要把逻辑表达式和条件语句放一块写一下,完全是因为二者的联系太过紧密,逻辑运算产生布尔值的结果,而条件语句则根据布尔值决定走那个分支. 逻辑与: &&, 首先逻辑与有逻辑与运算功能 ...

  9. php 配置Gmail 发送邮件 PHPMailer

    hotmail 获取邮箱授权码 准备 首先你应该登陆https://mail.google.com地址,注册一个Gmail邮箱,然后设置开启IMAP访问 打开设置,开启IMAP访问 获取应用专用密码 ...

  10. 一文速通Python并行计算：00 并行计算的基本概念

    一文速通 Python 并行计算:00 并行计算的基本概念 摘要: 该文介绍了 Python 并行计算的核心概念.编程模型及其应用,并介绍了了并行程序的性能分析与优化方法,如并行效率.加速比及 Amd ...