“Vue:v-for指令”的版本间的差异
来自CloudWiki
(创建页面,内容为“v-for 指令需要以 item in items 形式的特殊语法。常用来绑定数据对象。 最简单的例子: <nowiki> <!DOCTYPE html> <html> <head> <meta c…”) |
|||
(未显示同一用户的2个中间版本) | |||
第112行: | 第112行: | ||
</body> | </body> | ||
</html></nowiki> | </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]] |
2022年4月1日 (五) 15:10的最新版本
v-for 指令需要以 item in items 形式的特殊语法。常用来绑定数据对象。
最简单的例子:
<!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>
除了基础数据之外,还支持Json数组的绑定。比如:
<!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>
在v-for里面,可以使用<template> 标签来渲染多个元素块,下面就基于bootstrap样式使用v-for、v-if、v-else等实现一个简单的demo。
<!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>
是不是很easy!需要说明一点的是,pages是10,然后遍历它的时候,page的值会从1依次到10。
v-for指令除了支持数据对象的迭代以外,还支持普通Json对象的迭代,比如:
<!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>