vue-05列表渲染自学视频教程

朱雀 2022-12-18 15:51 171阅读 0赞

我们用 **v-for** 指令根据一组数组的选项列表进行渲染。**v-for** 指令需要使用 **item in list** 形式的特殊语法**，list**是源数据数组并且 **item** 是数组元素迭代的别名。

**  基本用法  **

**html**

<li v-for="item in list">
      {
        {item}}
    </li>

js

var app=new Vue({
    el:'#app',
    data:{
    list:['angular','react','vue',jquery]
      }
    })

**  对象循环输出  **

我们经常需要在循环的时候元素是一个对象

html

<liv-for="item in list">
      {
        {item.name}}--{
        {item.age}}
    </li>

js

var app=new Vue({
    el:'#app',
    data:{
    list:[
             {name:"mumu", age:18},
             {name:"zql", age:22},
             {name:"曾庆林", age:28},
          ]
      }
    })

**  索引 **

有时候我们需要知道当前循环元素的索引下标

<liv-for="(item, index) in list">
      {
        {item.name}}-{
        {index}}-{
        {item.age}}
    </li>

结果是

<li>mumu-0-18</li>
    <li>zql-0-22</li>
    <li>曾庆林-0-28</li>

**  key  **

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。

<li 
       v-for="(item,index) in items"
       :key="index">
        {
        {item}}
     </li>

var app=new Vue({
    el:'#app',
    data:{
    items:['mumu','曾庆林','木木','mumu']
      }
    })

如果不绑定tip 重复的'元素' 再列表循环在列表循环会警告

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 条件渲染与列表渲染

文章目录 * vue 渲染 * * 条件渲染 * * v-if 与 v-else渲染以及 v-show * 列表渲染 ...

清疚/ 2024年04月18日 23:53/ 0 赞/ 86 阅读

相关 Vue 列表渲染

v-for 把一个数组对应为一组元素用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法，i...

约定不等于承诺〃/ 2024年04月18日 23:05/ 0 赞/ 86 阅读

相关 vue-05列表渲染自学视频教程

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in list 形式的特殊语法，list是源数据数组并且 item 是数组元素迭代的

朱雀/ 2022年12月18日 15:51/ 0 赞/ 172 阅读

相关 vue实现商城列表渲染

需求：利用vue实现商城列表渲染所需数据如下： mockData: [{ "id":

痛定思痛。/ 2022年08月28日 05:54/ 0 赞/ 174 阅读

相关 vue.js列表渲染

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head

缺乏、安全感/ 2022年05月25日 13:39/ 0 赞/ 263 阅读

相关 Vue_条件渲染和列表渲染

一.条件渲染 1.v-if： v-if=‘name’ ：name值的true 或 false ，决定着这个标签的是否显示 2.v-show： v-show=‘sho

快来打我*/ 2022年05月22日 13:27/ 0 赞/ 284 阅读

相关列表渲染——Vue.js

1. v-for循环遍历数组 `（1）v-for` 指令需要使用 `item in items` 形式的特殊语法 <ul id="example-1">

悠悠/ 2022年04月22日 12:38/ 0 赞/ 259 阅读

相关 Vue系列六：列表渲染

1. 列表显示指令数组:v-for/index 对象:v-for/key 2. 列表的更新显示删除 item 替换 it

Love The Way You Lie/ 2022年01月30日 06:15/ 0 赞/ 291 阅读

相关 Vue列表渲染

列表渲染用\`v-for\`把一个数组对应为一组元素使用v-for遍历对象属性维护状态用`v-for`把一个数组对应为一组元素我们

墨蓝/ 2021年10月20日 00:26/ 0 赞/ 423 阅读

相关 Vue列表渲染

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

你的名字/ 2021年09月29日 04:16/ 0 赞/ 403 阅读