Vue.js中什么方法有遍历功能，v-for指令具体用法是怎样
导读：在实际案例的操作过程中，我们可能会遇到“Vue.js中什么方法有遍历功能，v-for指令具体用法是怎样”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编...
在实际案例的操作过程中，我们可能会遇到“Vue.js中什么方法有遍历功能，v-for指令具体用法是怎样”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。
一、什么是v-for指令
在vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。
二、遍历数组
代码示例如下：
!doctype html>
html lang="en">
head>
meta charset="utf-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="x-ua-compatible" content="ie=edge">
title>
document/title>
!--引入vue.js-->
script src="node_modules/vue/dist/vue.js" >
/script>
script>
window.onload=function(){
// 构建vue实例
new vue({
el:"#my",// el即element，表示挂载的元素，不能挂载在html和body元素上面
data:{
array:[1,2,3,4],//数组
}
,
// 方法
methods:{
}
}
)
}
/script>
/head>
body>
div id="my">
div>
h1>
下面的使用v-for遍历数组/h1>
div>
h1>
只显示值/h1>
ul>
li v-for=" v in array">
{
{
v}
}
/li>
/ul>
/div>
div>
h1>
显示值和索引/h1>
ul>
li v-for=" (v,index) in array">
值:{
{
v}
}
,对应的索引:{
{
index}
}
/li>
/ul>
/div>
/div>
/div>
/body>
/html>
其中index表示数组的索引
效果如下图所示：
注意：最新的版本中已经移除了$index获取数组索引的用法
三、遍历对象
代码示例如下：
!doctype html>
html lang="en">
head>
meta charset="utf-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="x-ua-compatible" content="ie=edge">
title>
document/title>
!--引入vue.js-->
script src="node_modules/vue/dist/vue.js" >
/script>
script>
window.onload=function(){
// 构建vue实例
new vue({
el:"#my",// el即element，表示挂载的元素，不能挂载在html和body元素上面
data:{
array:[1,2,3,4],//数组
}
,
// 方法
methods:{
}
}
)
}
/script>
/head>
body>
div id="my">
div>
h1>
下面的使用v-for遍历数组/h1>
div>
h1>
只显示值/h1>
ul>
li v-for=" v in array">
{
{
v}
}
/li>
/ul>
/div>
div>
h1>
显示值和索引/h1>
ul>
li v-for=" (v,index) in array">
值:{
{
v}
}
,对应的索引:{
{
index}
}
/li>
/ul>
/div>
/div>
/div>
/body>
/html>
效果如下图所示：
四、遍历数组对象
代码示例如下：
!doctype html>
html lang="en">
head>
meta charset="utf-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="x-ua-compatible" content="ie=edge">
title>
使用v-for指令遍历数组对象/title>
!--引入vue.js-->
script src="node_modules/vue/dist/vue.js" >
/script>
script>
window.onload=function(){
// 构建vue实例
new vue({
el:"#my",// el即element，表示挂载的元素，不能挂载在html和body元素上面
data:{
lists:[
{
name:"kevin",age:23}
,
{
name:"tom",age:25}
,
{
name:"joy",age:28}
]
}
,
// 方法
methods:{
}
}
)
}
/script>
/head>
body>
div id="my">
div>
h1>
下面的使用v-for遍历数组对象/h1>
div>
h1>
只显示值/h1>
ul>
li v-for=" list in lists">
name值:{
{
list.name}
}
,age值:{
{
list.age}
}
/li>
/ul>
/div>
div>
h1>
显示值和键/h1>
ul>
li v-for=" (list,index) in lists">
name值:{
{
list.name}
}
,age值:{
{
list.age}
}
, 对应的键:{
{
index}
}
/li>
/ul>
/div>
/div>
/div>
/body>
/html>
效果如下图所示：
到此这篇关于“Vue.js中什么方法有遍历功能，v-for指令具体用法是怎样”的文章就介绍到这了，感谢各位的阅读，更多相关Vue.js中什么方法有遍历功能，v-for指令具体用法是怎样内容，欢迎关注网络资讯频道，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vue.js中什么方法有遍历功能，v-for指令具体用法是怎样
本文地址： https://pptw.com/jishu/654305.html