4-vue语法 v-for

v-for表达式

<template>
  <view>
    <!-- 将arr中获取到的值循环遍历给item -->
    <view v-for="item in goods">{{item.title}}--{{item.price}}</view>
    <!-- 上面和下面的写法都是一样的结果，下面的更清晰 -->
    <view v-for="item in goods" class="out">
      <view class="row">{{item.title}}</view>
      <view class="row">{{item.price}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goods:[
          {
            title:"商品1",
            price:50
          },{
            title:"商品2",
            price:30
          }
        ]
      };
    }
  }
</script>

<style lang="scss">

</style>

也可以这样写，解构出他的每一项item和索引

    <view v-for="(item, index) in goods" class="out">
      <view class="row">{{index+"--"+item.title}}</view>
      <view class="row">{{index+"--"+item.price}}</view>
    </view>

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换

写循环带上key

<template>
  <view>
    <!-- 将arr中获取到的值循环遍历给item -->
    <view v-for="item in goods">{{item.title}}--{{item.price}}</view>
    <!-- 上面和下面的写法都是一样的结果，下面的更清晰 -->
    <view v-for="(item, index) in goods" class="out" :key = "item.id">
      <view class="row">{{index+"--"+item.title}}</view>
      <view class="row">{{index+"--"+item.price}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goods:[
          {
            id:1,
            title:"商品1",
            price:50
          },{
            id:2,
            title:"商品2",
            price:30
          }
        ]
      };
    }
  }
</script>

<style lang="scss">
.out{
  .row {
    font-size: 50rpx;
  }
}
</style>