Use v-for in Vue to display different pictures

1. Example premise: display an array object data. There is no picture field in the array object. The picture field is saved locally. Different pictures are displayed according to different ids (subscripts).

Sample code:

code in 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>

code in data

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

code in methods

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

2. Example premise: After clicking the button, change the style text color

Sample code:

Code in template:

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

Code in data:

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

Code in methods:

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