Vue 中使用 v-for 展示不同的图片

1. 示例前提：展示一个数组对象数据，数组对象中没有图片字段，图片字段在本地保存，根据不同的id(下标)展示不同的图片

示例代码：

template 中的代码

<template>
  <div class="box">
    <div class="item" v-for="(item, index) in resData" :key="index">
      <img :src="getImg(index)" class="img" />
      <p>{
    
    { item.dataValue }}</p>
      <p>{
    
    { item.dataName }}</p>
    </div>
  </div>
</template>

data 中的代码

data() {
  return {
    // 默认数据
    resData: [
      { dataName: "张叁", dataValue: "180" },
      { dataName: "李斯", dataValue: "182" },
      { dataName: "王武", dataValue: "183" },
    ]
  };
},

methods 中的代码

// 通过 id 动态获取图片名称，用来展示
getImg(index) {
  return require("@/views/montage/images/jiti" + index + ".png");
},

2.示例前提：点击按钮之后，改变样式文字颜色

示例代码：

template 中的代码：

<template>
  <div class="box">
    <div class="item" :style="currentStyle" @click="getStyle">
      文字颜色
    </div>
  </div>
</template>

data 中的代码：

data() {
  return {
    // 默认数据
    currentStyle: { color: "red", width: "180px" }
  };
},

methods 中的代码：

methods： {
  // 通过 id 动态获取图片名称，用来展示
  getStyle() {
    this.currentStyle = { color: "blue", width: "280px" };
  },
}