CSS 爱心按钮动画

    <template>
    	<view class="content">

    		<view class="label" @click="toggleFavorite">
    			<img class="heart" :class="{ heartt: isChecked }"
    				:src="isChecked ? '../../static/A.png' : '../../static/B.png'" alt="Favorite" />
    			<view class="action">
    				<view class="option-1" :class="{ active: isChecked }">我喜欢你</view>
    				<view class="option-2" :class="{ active: !isChecked }">不喜欢你</view>
    			</view>
    		</view>
    	</view>
    </template>

    <script setup>
    	import {
    		ref
    	} from 'vue';

    	const isChecked = ref(false);

    	function

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2024-01-10 13:50:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-10 13:50:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-10 13:50:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-10 13:50:02       20 阅读

热门阅读

  1. 用js的生成a标签下载文件,同时设置请求头

    2024-01-10 13:50:02       36 阅读
  2. FRIDA 调用原生函数时使用补丁也生效

    2024-01-10 13:50:02       36 阅读
  3. Node.js学习

    2024-01-10 13:50:02       31 阅读
  4. Node.js实现数据验证和校验功能

    2024-01-10 13:50:02       35 阅读
  5. 【办公软件】C#使用itextsharp新建PDF文件

    2024-01-10 13:50:02       31 阅读
  6. Hive之set参数大全-6

    2024-01-10 13:50:02       27 阅读
  7. 二分答案刷题

    2024-01-10 13:50:02       39 阅读
  8. C++互联网公司笔试攻略

    2024-01-10 13:50:02       43 阅读