插件窝 干货文章 vue.js的for(循环)语法应用

vue.js的for(循环)语法应用

vue.js vue 前端 框架 js 659    来源:插件窝    2021-04-13


v-for 指令可以绑定数组的数据来渲染一个项目列表:


<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

输出:

  1. 学习 JavaScript

  2. 学习 Vue

  3. 整个牛项目


在控制台里,输入 app4.todos.push({ text: '新项目' }),你会发现列表最后添加了一个新项目。