架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

vue学习笔记:v-for语法

架构师小跟班 2020-06-03 前端别闹
v-for遍历数组当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。格式如下:item in items的形式我们来看一个简单的案例:

v-for遍历数组

当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。

v-for的语法类似于JavaScript中的for循环。

格式如下:

item in items的形式

我们来看一个简单的案例:

如果在遍历的过程中不需要使用索引值

v-for="movie in movies"

依次从movies中取出movie,并且在元素的内容中,我们可以使用Mustache语法,来使用movie

如果在遍历的过程中,我们需要拿到元素在数组中的索引值呢?

语法格式:

v-for=(item, index) in items

其中的index就代表了取出的item在原数组的索引值。

<div id="app">
  <ul>
    <li v-for="(item,index) in movies" @click="btnClick(item)" :class="{active:isActive}">{{index}}-{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      movies: ["火影忍者", "进击的巨人", "黑猫警长", "海尔兄弟"],
      isActive: false
    },
    methods: {
      btnClick(item) {
        console.log(item);
      }
    }
  })
</script>

v-for遍历对象

v-for可以用于遍历对象:

比如某个对象中存储着你的个人信息,我们希望以列表的形式显示出来。

<div id="app">
  <ul>
    <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "架构师小跟班",
      info: {
        name: "架构师小跟班",
        age: 18,
        height: "184cm"
      }
    }
  })
</script>


文章评论