Vue2学习笔记:v-for指令
2024-09-01 07:24:28
1.使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
arr:['1','2','3'],
json:{a:'a',b:'b'}
}
});
}
</script>
</head>
<body>
<div id="box">
<p>循环数组</p>
<ul>
<li v-for="a in arr">
{{a}}
</li>
</ul>
<hr>
<p>循环出数组索引</p>
<ul>
<li v-for="(v,k) in arr">
{{v}}==>{{k}}
</li>
</ul>
<p>循环json</p>
<ul>
<li v-for="item in json">{{item}}</li>
</ul>
<p>循环json的键</p>
<ul>
<li v-for="(k,v) in json">
{{k}}==>{{v}}
</li>
</ul>
</div>
</body>
</html>
结果：
最新文章
- SSH框架整合
- SDRAM控制器的Verilog建模之一
- 怎样记住Integer的最大值（有趣的思维和搞笑的回答）
- Linux 6.5網卡配置
- 【UWP】对 Thickness 类型属性进行动画
- (转)WEB第三方打印控件[ASP.NET常用工具]
- Tomcat就是个容器，一种软件
- ClassLoader源码
- wpf鼠标捕获与控件交互——UIElement.CaptureMouse
- 远程mysql出现ERROR 1130 (HY000): Host '172.17.42.1' is not allowed to connect to this MySQL server
- Flask jQuery ajax
- onclick事件触发 input type=“file” 上传文件
- webpack中tree-shaking技术介绍
- Core Animation 文档翻译 （第一篇）
- hihocoder #1456 : Rikka with Lattice(杜教筛)
- 为什么重写了equals() 就要重写hashcode()
- 解题（DirGraCheckPath--有向图的遍历（深度搜索））
- 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下，android怎么加载H5界面
- 使用注解配置Spring
- 转：cookie.setPath()用法