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 ...
随机推荐
- [php代码审计] Typecho 1.1 -反序列化Cookie数据进行前台Getshell
环境搭建 源码下载:https://github.com/typecho/typecho/archive/v1.1-15.5.12-beta.zip 下载后部署到web根目录,然后进行安装即可,其中注 ...
- D3学习-加载本地数据
在加载本地数据时,弄了很久都无法显示出来,后来才知道是要把数据文件和html文件都加载到服务器上面 这样就可以显示出来了,
- Oracle—表、约束、索引、表空间、分区、序列、统计信息
表.约束.索引.表空间.分区.序列.统计信息 一.表及其操作 1.创建表 create table 表名 ( 字段名1 字段类型 默认值 是否为空 , 字段名2 字段类型 默认值 是否为空, 字段名3 ...
- vue2 页面路由
vue官方文档 src/views/Login.vue <template> <div> <h2>登录页</h2> </div> </ ...
- RunLoop基础知识以及GCD
- 1.1 字面意思 a 运行循环 b 跑圈 - 1.2 基本作用(作用重大) a 保持程序的持续运行(ios程序因而能一直活着不会死) b 处理app中的各种事件(比如触摸事件 ...
- 单元测试（Jest 和 Mocha）
Vue CLI 拥有通过 Jest 或 Mocha 进行单元测试的内置选项. Jest 是功能最全的测试运行器.它所需的配置是最少的,默认安装了 JSDOM,内置断言且命令行的用户体验非常好.不过你需 ...
- FastJson简介
FastJson简介 首先,介绍一下fastjson.fastjson是由alibaba开源的一套json处理器.与其他json处理器(如Gson,Jackson等)和其他的Java对象序列化反序列化 ...
- ClassLoader.loadClass()与Class.forName()的区别《 转》
ClassLoader.loadClass()与Class.forName()区别: ClassLoader.loadClass()与Class.forName()大家都知道是反射用来构造类的方法,但 ...
- Mysql资料 xtrabackup
目录 一.简介 原理 优缺点 二.安装 三.日常使用 备份所有库 增量备份 远程备份 四.参数 一.简介 原理 其实XtraBackup也是基于INNODB的 crash-recovery功能来实现的 ...
- shell脚本 binlog方式增量备份mysql
一.简介 源码地址 日期:2018/4/12 介绍:复制Binlog日志方式的增量备份脚本,并保存固定天数的备份 效果图: 二.使用 适用:centos6+ 语言:中文 注意:使用前先修改脚本中变量 ...