本篇讲列表渲染, 主要是对 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. 前端视角看 HTTPS

    最近用Docusaurus搭了一个个人网站,部署后看到浏览器地址栏上"不安全"三个字感觉特别辣眼,便不由自主的想起了HTTPS.回忆起自己在日常开发中遇到的一些与HTTPS相关的知 ...

  2. [SDOI2008] 洞穴勘测 题解

    似乎所有的线段树分治题都能被 \(LCT\) 平替掉? 一眼动态树,直接 \(LCT\). Connect x y 操作用 \(link(x,y)\) 实现,Destroy x y 操作用 \(cut ...

  3. Math.atan2求角度解析

    我们求角度的时候, 第一反应应该是Math.tan(x/y)就得到角度了 但是这样求的是和y轴的夹角,如果以y轴正方向为0度,顺时针为正,则第三象限和第一象限的tan值一致,需要判断x,y和0的关系, ...

  4. ‌PCI-5565PIO主要应用场景

    ‌PCI-5565PIO主要应用场景包括军事领域.工业自动化和控制系统.仿真与培训以及数据采集与分发‌.在军事领域,PCI-5565PIO可用于航空航天系统的飞行控制计算机.导航系统和传感器系统之间的 ...

  5. 标题Spark Mavem项目在本地测试报错 : Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/spark/SparkConf

    Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/spark/SparkConf at S ...

  6. 算子var_threshold

    算子var_threshold 名称 var_threshold - 通过局部均值和标准差分析对图像进行阈值处理. 签名 var_threshold(Image : Region : MaskWidt ...

  7. TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合

    \3c span id="mce_marker" data-mce-type="bookmark">\3c /span>\3c span id=&q ...

  8. mac上zsh环境变量如何配置

    环境变量配置 在 macOS 上,如果你使用的是 zsh 作为默认的 shell,那么 /bin/zsh 的环境变量通常可以在以下文件中配置: ~/.zshrc ~/.zprofile ~/.zshe ...

  9. 解决ERROR 1231 (42000): Variable 'time_zone' can't

    MySQL根据配置文件会限制Server接受的数据包大小.有时候大的插入和更新会受 max_allowed_packet 参数限制,导致写入或者更新失败.(比方说导入数据库,数据表) mysql 数据 ...

  10. Centos 安装 nload （流量监控）

    QQ交流群:646559931.系统安装基本工具[root@localhost ~]# yum install -y gcc gcc-c++ make flex byacc libpcap ncurs ...