Vue.js 的列表渲染 v-for

作者: Arvin Chen 分类: vue 来源: Break易站(www.breakyizhan.com)

Vue.js的列表渲染我们一般用的是v-for,那么,v-for一般是用来做什么列表渲染呢?v-for可用于:

  • v-for用于数组
  • v-for用于对象
  • v-for用于模板template
  • v-for用于组件

Vue.js 的列表渲染 v-for用于数组

v-for 可以绑定数据到数组来渲染一个列表:

     提示:可以修改代码后运行

Vue.js 的列表渲染 v-for用于对象

v-for 可以通过一个对象的属性来迭代数据,在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的:

     提示:可以修改代码后运行

Vue.js 的列表渲染 v-for用于模板template

类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素。比如:

     提示:可以修改代码后运行

Vue.js 的列表渲染 v-for用于组件

在2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

我们可以使用官网的一个例子来说明:

     提示:可以修改代码后运行

注意这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的,因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同,但是可以避开一些潜在的浏览器解析错误。查看 DOM 模板解析说明 来了解更多信息。

  •   本文标题:Vue.js 的列表渲染 v-for - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/vue/6688.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注