查看“Vue:v-for指令”的源代码
←
Vue:v-for指令
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
v-for 指令需要以 item in items 形式的特殊语法。常用来绑定数据对象。 最简单的例子: <nowiki> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head> <body> <div id="app"> <ul> <li v-for="value in nums">{{value}}</li> </ul> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //ViewModel var vue = new Vue({ el: '#app', data: { nums: [1, 2, 3, 4, 5, 6, 7, 8, 9] } }); </script> </body> </html></nowiki> 除了基础数据之外,还支持Json数组的绑定。比如: <nowiki> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head> <body> <div id="app"> <ul> <li v-for="value in values">姓名:{{value.Name}},年龄:{{value.Age}}</li> </ul> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //ViewModel var vue = new Vue({ el: '#app', data: { values: [{ Name: "小明", Age: 20 }, { Name: "小刚", Age: 18 }, { Name: "小红", Age: 16 }] } }); </script> </body> </html></nowiki> 在v-for里面,可以使用<template> 标签来渲染多个元素块,下面就基于bootstrap样式使用v-for、v-if、v-else等实现一个简单的demo。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head> <body> <div id="app"> <nav> <ul class="pagination pagination-lg"> <template v-for="page in pages "> <li v-if="page==1" class="disabled"><a href="#">上一页</a></li> <li v-if="page==1" class="active"><a href="#">{{page}}</a></li> <li v-else><a href="#">{{page}}</a></li> <li v-if="page==pages"><a href="#">下一页</a></li> </template> </ul> </nav> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //ViewModel var vue = new Vue({ el: '#app', data: { pages: 10 } }); </script> </body> </html></nowiki> [[文件:vue2022040106.png|600px]] 是不是很easy!需要说明一点的是,pages是10,然后遍历它的时候,page的值会从1依次到10。 v-for指令除了支持数据对象的迭代以外,还支持普通Json对象的迭代,比如: <nowiki> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head> <body> <div id="app"> <ul> <li v-for="(value, key) in values"> {{ key }} : {{ value }} </li> <li v-for="(value, key, index) in values"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //ViewModel var vue = new Vue({ el: '#app', data: { values: { Name: "小明", Age: 20, School: "**高中" } } }); </script> </body> </html></nowiki> [[文件:vue2022040107.png|600px]]
返回至
Vue:v-for指令
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息