1. 概述

老话说的好:单打独斗是不行的,要懂得合作。

言归正传,今天我们来聊聊 VUE3 的 循环渲染。

2. 循环渲染

2.1 循环渲染数组

<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
myList:["apple", "pear", "orange"]
}
},
template : `
<div>
<div v-for="item in myList">{{item}}</div>
</div>
`
}); // vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素

2.2 循环数组得到元素和下标

        template : `
<div>
<div v-for="(item, index) in myList">
{{index}} - {{item}}
</div>
</div>
`

2.3 遍历对象

        data() {
return {
myObject:{
"firstFruit": "apple",
"secondFruit": "pear",
"thirdFruit": "orange"
}
}
}, template : `
<div>
<div v-for="(value, key, index) in myObject">
{{index}} - {{key}} - {{value}}
</div>
</div>
`

遍历对象可以得到 下标、key 和 value

2.4 数组中追加元素

        data() {
return {
myList:["apple", "pear", "orange"]
}
},
methods : {
addElementToList() {
this.myList.push("newFruit");
}
},
template : `
<div>
<div v-for="(item, index) in myList">
{{index}} - {{item}}
</div>
<button @click="addElementToList">新增</button>
</div>
`

2.5 数组中从头部插入元素

        methods : {
addElementToListHead() {
this.myList.unshift("newFruit");
},
},
template : `
<div>
<div v-for="(item, index) in myList" >
{{index}} - {{item}}
</div>
<button @click="addElementToListHead">从头部新增</button><br>
</div>
`

2.6 从数组尾部删除元素

        methods : {
popElementFormList() {
this.myList.pop();
},
},
template : `
<div>
<div v-for="(item, index) in myList" >
{{index}} - {{item}}
</div>
<button @click="popElementFormList">从尾部删除</button>
</div>
`

2.7 从数组头部删除元素

        methods : {
shiftElementFormList() {
this.myList.shift();
},
},
template : `
<div>
<div v-for="(item, index) in myList">
{{index}} - {{item}}
</div>
<button @click="shiftElementFormList">从头部删除</button><br>
</div>
`

2.8 替换整个数组

        methods : {
replaceList() {
this.myList = ["banana", "peach"];
},
},

替换数组后,页面会重新渲染新的数组

2.9 修改数组元素

        methods : {
modifyListElement() {
this.myList[1] = "pear1";
},
},

2.10 新增对象属性

        data() {
return {
myObject:{
"firstFruit": "apple",
"secondFruit": "pear",
"thirdFruit": "orange"
}
}
},
methods : {
addAttributeToObject() {
this.myObject.fourthFruit = "banana";
}
},
template : `
<div>
<div v-for="(value, key, index) in myObject">
{{index}} - {{key}} - {{value}}
</div>
<button @click="addAttributeToObject">新增</button><br>
</div>
`

3. 综述

今天聊了一下 VUE3 的 循环渲染,希望可以对大家的工作有所帮助

欢迎帮忙点赞、评论、转发、加关注 :)

关注追风人聊Java,每天更新Java干货。

4. 个人公众号

追风人聊Java,欢迎大家关注

VUE3 之 循环渲染的更多相关文章

  1. vue3——vue数据循环渲染

    博客地址 :https://www.cnblogs.com/sandraryan/ vue循环渲染 <!DOCTYPE html> <html lang="en" ...

  2. vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02

    一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...

  3. Vue如何循环渲染图片

    Vue如何把服务器返回的图片数据渲染出来 首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg. 我的做法是先在data里定义一个数组,来存储服 ...

  4. vue如何循环渲染element-ui中table内容

    对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...

  5. beetl模版for循环渲染字符串

    beetl for循环渲染html字符串的方式, beetl if条件判断输出, beet自定义标签和标签引用, beetl html赋值, beetl渲染json,beetl注释.变量定义, 更多文 ...

  6. Flutter中通过循环渲染组件

    class ContactsState extends State<Contacts>{ List formList; initState() { super.initState(); f ...

  7. Ajax接收Json数据,调用template模板循环渲染页面的方法

    一. 后台接口吐出JSON数据 后台php接口中,需要写三个部分: 1.1 开头header规定数据格式: header("content-type:application/json;cha ...

  8. Vue学习笔记(三)条件渲染和循环渲染

    目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...

  9. 微信小程序 富文本插件 循环渲染方式

    感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF ...

随机推荐

  1. Vue 标签中的ref属性和refs

    ref: ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件. ...

  2. SVN的基本介绍\服务器配置

    ### 1. 工作场景 1. 进入公司需要做的关于开发的第一件事, 就是向项目经理索要SVN服务器地址+用户名+密码### 2. 角色解释> 服务器: 用于存放所有版本的代码,供客户端上传下载更 ...

  3. Spring是如何保证同一事务获取同一个Connection的?使用Spring的事务同步机制解决:数据库刚插入的记录却查询不到的问题(转)

    前言 关于Spring的事务,它是Spring Framework中极其重要的一块.前面用了大量的篇幅从应用层面.原理层面进行了比较全方位的一个讲解.但是因为它过于重要,所以本文继续做补充内容:Spr ...

  4. 【Linux】【Services】【Disks】bftfs

    1. 简介 1.1 Btrfs(B-tree,Butter FS,Better FS) 1.2. 遵循GPL,由oracle在2007年研发,支持CoW 1.3. 主要为了替代早期的ext3/ext4 ...

  5. spring的核心容器ApplicationContext

    //bean.xml配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns=" ...

  6. 那些年采的python的坑

    1:使用virtualenvwrapper 新建虚拟环境时出现的错误 OSError: Command D:\file\python\virtu...r\Scripts\python.exe - se ...

  7. Redis版本历史

    目录 Redis4.0 Redis3.2 Redis3.0 Redis2.8 Redis2.6 Redis4.0 可能出乎很多人的意料,Redis3.2之后的版本是4.0,而不是3.4.3.6.3.8 ...

  8. df和du显示不同

    目录 一.简介 二.原因分析 三.解决方法 一.简介 Linux服务器,使用df -h查看文件系统使用率,可以看到/dev/xvdb1磁盘占用了约27G,挂载目录为/opt. 但进入到opt目录中执行 ...

  9. <转>Android多线程总结

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://yuchen.blog.51cto.com/2739238/593019 --An ...

  10. 突破类型限制的“数据透视图”(Excel技巧集团)

    Excel中,图表一共16个大类,但是数据透视图却被"阉"了好几个-- 这也就是说,数据透视图无法与上图中高亮标出的图表类型并存了? 确实如此,但并不绝对,因为我们可以在" ...