重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Vue.js怎么对数组和对象进行循环

本文小编为大家详细介绍“Vue.js怎么对数组和对象进行循环”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue.js怎么对数组和对象进行循环”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

创新互联是网站建设技术企业,为成都企业提供专业的网站设计、成都做网站,网站设计,网站制作,网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制适合企业的网站。10多年品质,值得信赖!

v-for

v-for 是 Vue 的基本指令之一,一旦你学会如何使用它,你就可以在你的程序中添加更多功能。

简单的来说,v-for 就是一个 for 循环。如果你还不知道什么是 for 循环的话,for 循环其实是一段代码,代码内每一个元素都会被执行一次,而这些元素通常是一个 Array(数组)Object(对象)

今天,我们要从头开始,这样我们所做的一切都有一个明确的目的。下面是我们的 index.html 文件的基本结构,你可以将它复制粘贴到编辑器中。




  Vue 101



  

  
     

让我们先创建一个简单的数组,这样我们可以使用循环输出数组里的内容。我们将在 data 对象中创建一个属性,叫做 games。当然,你也可以取一个自己喜欢的名字???。

data: {
  games: [
    'Super Mario 64',
    'The Legend of Zelda Ocarina of Time',
    'Secret of Mana',
    'Super Metroid'
  ]
},

现在我们已经设置好了数组,让我们创建一个简单的

看起来很不错! 现在我们要告诉 Vue,我们要通过循环数组在

?. 看到上面一大堆是不是很害怕?不用担心,你只需要了解的是什么,让我们详细分析一下:

来吧,在浏览器中继续运行我们的 index.html 文件。

每次循环时可不可以不使用 DIV ?

如果你发现写了一大堆

标签只是为了用 v-for 循环,那么可以使用