18.VUE学习之-v-for操作对象与数值
一组数组时的循环
二组数组时的循环
另外可以v for 20 可以直接操作数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
<!--item相当于v-->
<li v-for="(v,k) in test">
{{k}} - {{v}}
</li>
<li v-for="(item,key,index) in user">
{{index}} - {{key}} - {{item}}
</li>
<hr>
<li v-for="(item,key) in arr">
{{key}} - {{item.name}} - {{item.age}} - {{item.sex}}
</li>
<hr>
<table border="1" width="100%">
<tr v-for="v in 20">
<td>{{v}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
user: {
name: '向军',
age: '22',
sex: 'boy'
},
arr:[
{name: '小王',age: '21',sex: 'boy'},
{name: '小李',age: '22',sex: 'boy'},
{name: '张三',age: '23',sex: 'boy'},
],
test:['css','js','php']
}
});
</script>
</body>
</html>
效果:
18.VUE学习之-v-for操作对象与数值的更多相关文章
- 018——VUE中v-for操作对象与数值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue v-for操作对象与数值
<!doctype html> <html lang="en"> <head id="head"> <meta cha ...
- scala编程第18章学习笔记——有状态的对象
银行账号的简化实现: scala> class BankAccount{ | private var bal: Int = 0 | def balance: Int = bal | def de ...
- PHP中的MySQLi扩展学习(六)MySQLI_result对象操作
在之前的文章中,我们就已经接触过 MYSQLI_result 相关的内容.它的作用其实就是一个查询的结果集.不过在 PDO 中,一般直接通过 query() 或者 PDOStatement 对象进行查 ...
- PHP中的MySQLi扩展学习(五)MySQLI_STMT对象操作
就像 PDO 中的 PDO_Statment 对象一样,MySQLI_STMT 对象也是一个预处理语句所形成的对象,专门用来操作 MySQLi 所生成的预处理语句的.其实操作方式之类也都比较相似,不外 ...
- 我所理解的Vue——学习心得体会1(Vue对象)
初学Vue,总结如下: 1.首先要区分html的dom和js的dom 2.html的dom是View的范畴,js的dom是Model的范畴. 3.vue这库就是创建了伟大的new Vue()对象,把h ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
随机推荐
- 二进制读取 jdbc
package com.itheima.clob.test; import java.io.FileInputStream; import java.io.FileOutputStream; impo ...
- HiveSQLException: Error while compiling statement: No privilege 'Create' found for outputs { database:default }
今天用Hive的JDBC实例时出现了HiveSQLException: Error while compiling statement: No privilege 'Create' found for ...
- docker~aspnetcore2.0镜像安装软件的加速器
一般对于安装软件加速时,我们大多数会选择阿里云,而对于aspnetcore2.0这个进项来说,由于使用的是Debian操作系统,所有我们要找到它对应的mirror列表,下面是我整理的一个sources ...
- c#文件相关笔记
1.将*.txt文件内容转换为一个字符串str FileStream fs = new FileStream("路径\\*.txt", FileMode.Open); Stream ...
- java多线程关键字volatile的使用
java多线程关键字volatile的作用是表示多个线程对这个变量共享. 如果是只读的就可以直接用,写数据的时候要注意同步问题. 例子: package com.ming.thread.volatil ...
- 使用PHP导入Excel和导出数据为Excel文件
有时需要将Excel表格的数据导入到mysql数据库中,我们使用PHP的一个开源项目PHP-ExcelReader可以轻松实现Excel的导入.另外将mysql数据导出为Excel与本站上篇文章中导出 ...
- PIO导出
1..HSSFWorkbook 声明一个工作簿,创建一个excel文件 //创建HSSFWork对象(excel的文档对象) HSSFWorkbook wb=new HSSFWorkbook(); / ...
- 查看Apache信息以用户htdoc位置
查看Apache的相关信息:httpd -V 再从基本信息中取得DocumentRoot位置 less /etc/httpd/httpd.conf中查找DocumentRoot,即有静态文件存放的位置 ...
- SSM整合笔记
SSM整合笔记 1,创建maven项目 创建maven项目过程省略 ps:如果创建完maven项目之后项目报错,可能是没有配置Tomcat 2,在pom.xml里面导入相应的jar的依赖 <pr ...
- bank conflct 一句话总结
由于最新的多播模式区别于原来的广播模式,原来同一个warp不同线程访问同一个bank的相同地址不再是bank conflict, 现在总结为:只要同一个 warp 的不同线程会访问到同一个 bank ...