VUE3 之 循环渲染
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 之 循环渲染的更多相关文章
- vue3——vue数据循环渲染
博客地址 :https://www.cnblogs.com/sandraryan/ vue循环渲染 <!DOCTYPE html> <html lang="en" ...
- vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02
一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...
- Vue如何循环渲染图片
Vue如何把服务器返回的图片数据渲染出来 首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg. 我的做法是先在data里定义一个数组,来存储服 ...
- vue如何循环渲染element-ui中table内容
对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...
- beetl模版for循环渲染字符串
beetl for循环渲染html字符串的方式, beetl if条件判断输出, beet自定义标签和标签引用, beetl html赋值, beetl渲染json,beetl注释.变量定义, 更多文 ...
- Flutter中通过循环渲染组件
class ContactsState extends State<Contacts>{ List formList; initState() { super.initState(); f ...
- Ajax接收Json数据，调用template模板循环渲染页面的方法
一. 后台接口吐出JSON数据 后台php接口中,需要写三个部分: 1.1 开头header规定数据格式: header("content-type:application/json;cha ...
- Vue学习笔记（三）条件渲染和循环渲染
目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...
- 微信小程序 富文本插件 循环渲染方式
感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF ...
随机推荐
- Java打jar包详解
Java打jar包详解 一.Java打jar包的几种方式https://www.cnblogs.com/mq0036/p/8566427.html 二.MANIFEST.MF文件详解https://w ...
- pop回指定控制器
//OCNSArray *array = [NSMutableArray new]; array = self.navigationController.viewControllers; //1.返回 ...
- Linux基础命令----smbclient
smbclient smbclient是一个smb服务器的客户端的管理程序,可以交互式的访问samba服务器. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.SU ...
- Dubbo声明式缓存
为了进一步提高消费者对用户的响应速度,减轻提供者的压力,Dubbo提供了基于结果的声明式缓存.该缓存是基于消费者端的,所以使用很简单,只需修改消费者配置文件,与提供者无关 一.创建消费者07-cons ...
- Dubbo管控平台
2019年初,官方发布了Dubbo管理控制台0.1版本.结构上采取了前后端分离的方式,前端使用Vue和Vuetify分别作为Javascript框架和UI框架,后端采用Spring Boot框架 一. ...
- 测试数据库并发压力的shell脚本
本节内容:一例用于测试数据库并发压力的shell脚本代码. 例子: #!/bin/bash #********************************# #并发后台运行fun # #for w ...
- 【Linux】【Services】【Project】Haproxy Keepalived Postfix实现邮件网关Cluster
1. 简介: 1.1. 背景:公司使用exchange服务器作为邮件服务器,但是使用Postfix作为邮件网关实现病毒检测,内容过滤,反垃圾邮件等功能.原来的架构非常简单,只有两台机器,一个负责进公司 ...
- java多线程7：ReentrantReadWriteLock
真实的多线程业务开发中,最常用到的逻辑就是数据的读写,ReentrantLock虽然具有完全互斥排他的效果(即同一时间只有一个线程正在执行lock后面的任务), 这样做虽然保证了实例变量的线程安全性, ...
- [BUUCTF]REVERSE——[WUSTCTF2020]Cr0ssfun
[WUSTCTF2020]Cr0ssfun 附件 步骤: 例行检查,无壳儿,64位程序,直接ida载入,检索程序里的字符串,根据提示跳转 看一下check()函数 内嵌了几个检查的函数,简单粗暴,整理 ...
- [BUUCTF]PWN6——ciscn_2019_c_1
[BUUCTF]PWN6--ciscn_2019_c_1 题目网址:https://buuoj.cn/challenges#ciscn_2019_c_1 步骤: 例行检查,64位,开启了nx保护 nc ...