微信小程序生日提醒功能实现：点赞交互效果

<template>
  <view>
    <view v-for='(item, index) in birList' :key='index' class='birth-msg'>
      <view class='left-bir'>
        <text class='bir-msg-font' style='font-size: 15px;'>{{ item.msg }}</text>
        <text class='bir-msg-font' style='color: darkgray;'>{{ item.date }}</text>
      </view>
      <view class='right-bir' @click='toggleLike(index)'>
        <img :src='getLikeImage(item.liked)' alt=''>
        <text>{{ item.liked ? '已点' : '点赞' }}</text>
      </view>
    </view>
  </view>
</template>
<script>
import { br } from '@/common/util/birthday.js';
export default {
  data() {
    return {
      birList: br.data,
    };
  },
  methods: {
    toggleLike(index) {
      this.birList[index].liked = !this.birList[index].liked;
    },
    getLikeImage(liked) {
      return liked ? '/static/haifa/birthday1.png' : '/static/haifa/birthday.png';
    },
  },
};
</script>
<style>
.birth-msg {
  height: 160rpx;
  width: 92%;
  background-color: white;
  margin-top: 20rpx;
  margin-left: 4%;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
}

.left-bir {
  position: relative;
  height: 100%;
  width: 80%;
  display: flex;
  flex-direction: column;
}

.bir-msg-font {
  margin-top: 30rpx;
  margin-left: 20rpx;
}

.right-bir {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
}

.right-bir img {
  width: 70rpx;
  height: 70rpx;
}
</style>
<p>要实现点击点赞图片时切换图片和文字内容，可以使用一个状态变量来控制图片和文字的显示。</p>
<p>首先，在 <code>data</code> 中添加一个名为 <code>liked</code> 的状态变量，并设置初始值为 <code>false</code>。</p>
<p>然后，在点击点赞图片的事件处理程序中，切换 <code>liked</code> 变量的值。</p>
<p>接下来，在模板中使用条件渲染 <code>v-if</code> 或 <code>v-show</code> 来根据 <code>liked</code> 的值来切换图片和文字的显示。</p>
<p>以下是修改后的代码示例：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;view&gt;
    &lt;view v-for='(item, index) in birList' :key='index' class='birth-msg'&gt;
      &lt;view class='left-bir'&gt;
        &lt;text class='bir-msg-font' style='font-size: 15px;'&gt;{{ item.msg }}&lt;/text&gt;
        &lt;text class='bir-msg-font' style='color: darkgray;'&gt;{{ item.date }}&lt;/text&gt;
      &lt;/view&gt;
      &lt;view class='right-bir' @click='toggleLike(index)'&gt;
        &lt;img :src='getLikeImage(item.liked)' alt=''&gt;
        &lt;text&gt;{{ item.liked ? '已点' : '点赞' }}&lt;/text&gt;
      &lt;/view&gt;
    &lt;/view&gt;
  &lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
import { br } from '@/common/util/birthday.js';
export default {
  data() {
    return {
      birList: br.data,
    };
  },
  methods: {
    toggleLike(index) {
      this.birList[index].liked = !this.birList[index].liked;
    },
    getLikeImage(liked) {
      return liked ? '/static/haifa/birthday1.png' : '/static/haifa/birthday.png';
    },
  },
};
&lt;/script&gt;

&lt;style&gt;
.birth-msg {
  height: 160rpx;
  width: 92%;
  background-color: white;
  margin-top: 20rpx;
  margin-left: 4%;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
}

.left-bir {
  position: relative;
  height: 100%;
  width: 80%;
  display: flex;
  flex-direction: column;
}

.bir-msg-font {
  margin-top: 30rpx;
  margin-left: 20rpx;
}

.right-bir {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
}

.right-bir img {
  width: 70rpx;
  height: 70rpx;
}
&lt;/style&gt;
</code></pre>