js根据name获取value_Vue.js中vfor列表渲染指令的使用

点击蓝字关注我们！每天获取最新的编程小知识！

源 / php中文网      源 / www.php.cn

本篇文章将给大家介绍如何循环数组并在vuejs渲染项目列表，希望对需要的朋友有所帮助！

(查看原文请点击本文末尾左下角：

v-for指令

Vuejs为我们提供了一个v-for指令，用于将项目列表渲染到dom中。

v-for指令的语法

v-for="user in users"

示例

  for="user in users">{{user.name}}

 export default{

     data:function(){

         return{

             users:[

                 {id:1,name:"king"},

                 {id:2,name:"gowtham"},

                 {id:3,name:"ooops"},

             ]

         }

     }

 }

在上面的代码中，我们使用v-for指令循环遍历users数组，这样在每次循环中user变量都指向数组中出现的不同对象。

key属性

当使用v-for指令时，我们需要向该元素添加一个key属性，因为vuejs需要根据提供的key跟踪列表项。

注意:密钥应该是唯一的

让我们将key属性添加到模板中。

  for="user in users" :key="user.id">

    {{user.name}}

 export default{

     data:function(){

         return{

             users:[

                 {id:1,name:"king"},

                 {id:2,name:"gowtham"},

                 {id:3,name:"ooops"},

             ]

         }

     }

 }

在users数组中，id属性对每个对象都是唯一的，因此我们将它传递给key属性。

我们还可以访问数组中每个项的索引。

  for="(user,index) in users" :key="user.id">

    {{user.name}} {{index}}

遍历对象

我们还可以通过使用v-for指令循环JavaScript对象。

    for="(value, key) in person" :key="key">

      {{key}} : {{ value }}

export default {

  data: function() {

    return {

      person: {

        firstName: "Rim",

        lastName: "Doe",

        age: 20,

        eyeColor: "blue"

      }

    };

  }

};

注意:在对象中，我们需要先提取value，然后是key。

本篇文章就是关于Vue.js中v-for列表渲染指令的使用介绍，希望对需要的朋友有所帮助！

-END-

声明：本文选自「 php中文网 」，搜索「 phpcnnew 」即可关注！

▼