Vue-Vue列表渲染v-for
2024-08-20 04:50:43
v-for 指令需要以 site in sites 形式的特殊语法
一、v-for 循环数组
HTML代码
<div id="app">
<ul>
<li v-for='item in list'>{{item}}</li>
</ul>
</div>
JS代码
new Vue({
el:'#app',
data:{
list:[
'red',
'green',
'blue'
]
}
})
可以提供第二个参数为索引
HTML代码
<div id="app">
<ul>
<li v-for='(item, index) in list'>{{index}}:{{item}}</li>
</ul>
</div>
二、v-for 循环迭代对象属性值
HTML代码
<div id="app">
<ul>
<li v-for='value in obj'>{{value}}</li>
</ul>
</div>
JS代码
new Vue({
el:'#app',
data:{
obj:{
name:'lizhao',
sex:'nv',
age:'23'
}
}
})
可以提供第二个的参数为键名;第三个参数为索引;
HTML代码
<div id="app">
<ul>
<li v-for='(value, key,index) in obj'>{{index}}:{{key}}-{{value}}</li>
</ul>
</div>
三、题外话:改变数组元素使得页面也改变的3种方法
想数组改变,对应页面也改变,不能用下标的方法操作数组 。
1、可以用数组变异方法:pop(删除最后一个)、 shift(删除第一个)、 push(数组最后加)、unshift(数组第一项前加)、splice(截取数组)、 sort(排序)、reverse(数组取翻) 。
2、可以改变引用:
3、用set方法。
最新文章
- 文档分享-Activiti 5.16 用户手册
- adaboost原理与实践
- double截取小数点位数
- ng-repeat指令应用
- Hbase的Observer
- PDO应用
- Cocos2d-x——CocosBuilder官方帮助文档翻译2 多分辨率支持
- flash player 版本对照
- 析构函数释放内存时出现_BLOCK_TYPE_IS_VALID错误
- Archlinux运行FlashTool
- 使用原生php读写excel文件
- FastDFS 集群 安装 配置
- java学习笔记07-循环
- android引用arr包
- [UE4]AttachToComponent的AttachmentRule
- 【CSS】环形进度条
- 利用OpenCV给图像添加中文标注
- 解决MAMP启动mysql服务 但是Navicat连接不上
- Qt编写自定义控件10-云台仪表盘
- 上传文件 input file
热门文章
- 我的Java之旅 第七课 JAVA WEB 会话管理
- 微信小程序-01-项目组成文件介绍(入门篇)
- (后台)org.apache.catalina.connector.ClientAbortException: null
- MSSQL清理所有用户数据库日志(SQLSERVER2008)
- webAPi OData的使用
- SpringBoot整合Rabbitmq设置消息请求头
- .net core 导出Excel(epplus 创建excel )
- <;!DOCTYPE>;标签与table高度100% (转)
- Ajax进阶
- Arduino IDE for ESP8266 (0) 官方API