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 ...
随机推荐
- 大数据学习day23-----spark06--------1. Spark执行流程（知识补充：RDD的依赖关系）2. Repartition和coalesce算子的区别 3.触发多次actions时，速度不一样 4. RDD的深入理解（错误例子，RDD数据是如何获取的）5 购物的相关计算
1. Spark执行流程 知识补充:RDD的依赖关系 RDD的依赖关系分为两类:窄依赖(Narrow Dependency)和宽依赖(Shuffle Dependency) (1)窄依赖 窄依赖指的是 ...
- 走进Spring Boot源码学习之路和浅谈入门
Spring Boot浅聊入门 **本人博客网站 **IT小神 www.itxiaoshen.com Spring Boot官网地址:https://spring.io/projects/spring ...
- 06 - Vue3 UI Framework - Dialog 组件
做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放 ...
- 前端浅谈-协议相关(http/https)
当DNS工作完之后得到了一个网址 https//192.168.1.255/index.html 这个并不符合标准的请求路径.接下来就是https的功能了.讲https前先讲讲它的前身http协议 H ...
- ciscn_2019_s_6
例行检查 没有开启nx保护,考虑用shellcode来做这道题 程序放入ida查看 我们可以输入48个字符覆盖0使printf打印出bp的值 继续看这里,buf的大小实际上只有0x38的大小,但是re ...
- ciscn_2019_n_8 1
拿到题目老样子先判断是多少位的程序 可以看到是32位的程序,然后再查看开启的保护 然后将程序放入ida进行汇编 先shift+f12查看程序是否有system和binsh 可以看到有system和bi ...
- .NET 云原生架构师训练营（建立系统观）--学习笔记
目录 目标 ASP .NET Core 什么是系统 什么是系统思维 系统分解 什么是复杂系统 作业 目标 通过整体定义去认识系统 通过分解去简化对系统的认识 ASP .NET Core ASP .NE ...
- JDK ThreadPoolExecutor核心原理与实践
一.内容概括 本文内容主要围绕JDK中的ThreadPoolExecutor展开,首先描述了ThreadPoolExecutor的构造流程以及内部状态管理的机理,随后用大量篇幅深入源码探究了Threa ...
- CF946B Weird Subtraction Process 题解
Content 有两个数 \(a,b\),执行如下操作: 如果 \(a,b\) 中有一个数是 \(0\),结束操作,否则跳到操作 \(2\). 如果 \(a\geqslant 2b\),那么 \(a\ ...
- LuoguP6904 [ICPC2015 WF]Amalgamated Artichokes 题解
Content 已知常数 \(p,a,b,c,d\),我们知道,第 \(k\) 天的股价公式为 \(price_k=p\times(\sin(a\times k+b)+\cos(c\times k+d ...