本篇讲列表渲染, 主要是对 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. DeepSeek + 在线Excel ， 打造智能表格新纪元

    微信搜一搜[葡萄城社区]关注,了解更多动态 SpreadJS 已经接入 DeepSeek 啦! 相信这段时间,大家都被[DeepSeek]刷屏了.DeepSeek 以其强大的技术能力和创新的解决方案, ...

  2. 什么是A型或者B型剩余电流保护器？

    我国的剩余电流保护装置(RCD)指导性标准GB/Z 6829-2008(IEC/TR 60755:2008,MOD)<剩余电流动作保护器的一般要求> 从产品的基本结构.剩余电流类型.脱扣方 ...

  3. Typecho自定义右键菜单美化和禁用F12

    右键美化 使用右键美化,请禁用 HoerMouse 鼠标美化插件,否则貌似没效果 Joe主题在后台-外观设置-设置外观-全局设置-自定义<body></body>标签内填入如下 ...

  4. My'Bug

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

  5. 常用损失函数 LossFunction

    文章结构 损失函数在神经网络中的位置 常用的损失函数(结构:解释,公式,缺点,适用于,pytorch 函数) MAE/L1 Loss MSE/L2 Loss Huber Loss 对信息量.熵的解释 ...

  6. 基础指令:mkdir、ls、cd、pwd、touch、rm、mv、cp、echo、cat、关机与重启

    目录 1. 创建目录 2. 查看目录内容 3. 进入指定目录(传送) 4. 显示当前所在位置 5. 创建文件 6. 删除文件或目录 7. 移动文件 8. 复制文件或目录 9. echo输出信息到屏幕 ...

  7. APEX实战第3篇：如何完善项目基础功能

    上一篇<APEX实战第2篇:构建自己第一个APEX程序>虽然有了程序,但实在是太单薄! 本篇将会介绍一些数据库的基础知识,演示如何通过函数.触发器.存储过程.视图等来完善项目的一些基础功能 ...

  8. 选择排序--java进阶day06

    1.选择排序 https://kdocs.cn/l/ciMkwngvaWfz?linkname=150996881 了解了选择排序之后,我们来找其中的规律 2.规律 选择排序就是一个元素和数组后续元素 ...

  9. CoreOS 更新重启后, 所有容器服务全部停掉了

    今天有几个服务出问题了,上去看了下,这台 CoreOS 下的所有容器服务竟然全部停掉了,好奇怪,启动容器时明明加了--detach参数了呀. 问题原因 想了想,会不是是 CoreOS 更新重启导致的, ...

  10. leetcode每日一题：最小化字符串长度

    题目 2716. 最小化字符串长度 给你一个下标从 0 开始的字符串 s ,重复执行下述操作 任意 次: 在字符串中选出一个下标 i ,并使 c 为字符串下标 i 处的字符.并在 i 左侧(如果有)和 ...