图片的显示隐藏（两张图片，默认的时候显示第一张，点击的时候显示另一张）

在写项目的时候，经常遇到一些图片显示的问题，

当页面静止的时候显示第一张（第二张页面隐藏），点击或者划过的时候显示第二张（第一张图片隐藏）  【并且第二张图片显示的时候，下面的文字也是变化的】

页面代码如下：

<div class="fk">
      <ul class="img_1">
             <li v-for="(item, i) in xhwb" :key="i" @click="active2 = i">
                   <img v-if="active2 === i" :src="item.img_2" alt="">
                   <img v-else :src="item.img_1" alt="">
              </li>
      </ul>
      <div class="gd" v-if="active2 === null">
             <span>查看更多</span>
             <img class="img_1" src="../../static/img/jthui.png" alt="">
      </div>
      <div class="gd" v-else>
             <span style="color: red">查看更多</span>
             <img class="img_1" src="../../static/img/jtred.png" alt="">
      </div>
</div>            

js代码:

<script>
export default {
  name: 'logo',
  data () {
    return {
      xhwb: [
        {
          img_1: require('../../static/img/jshui.png'),
          img_2: require('../../static/img/jsred.png')
        },
        {
          img_1: require('../../static/img/cphui.png'),
          img_2: require('../../static/img/cpred.png')
        },
        {
          img_1: require('../../static/img/alhui.png'),
          img_2: require('../../static/img/alred.png')
        },
        {
          img_1: require('../../static/img/tshui.png'),
          img_2: require('../../static/img/tsred.png')
        }
      ],
      active: null
    }
  }
}

css样式：

.img_1{
         width: 590px;
         height: 195px;
         display: flex;
         justify-content: space-around;
           li {
               padding-top: 50px;
           }
      }

效果图如下：

解释：四张图片默认显示灰色的，点击的时候现在红色，并且下面的文字也随着变红