Vue3中props+v-bind+计算属性+CSS样式混合使用案例

 <template>
  <DownOutlined class='collapse-icon'/>
</template>
 
<script setup lang='ts'>
import {ref, reactive} from "vue"
import {computed} from 'vue'
 
const props = defineProps({
  expand: {type: Boolean},
})
// 展开/收起 图标旋转转数
const turn = computed(() => `${props.expand} ? 0 : 0.5}turn`);
</script>
 
<style lang="less" scoped>
.collapse-icon {
  transform: rotate(v-bind(turn));
  transition: transform .3s;
}
</style>

posted @ 2023-05-28 00:31 Felix_Openmind 阅读(372) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue3开发效率总结

· Vue3中使用data()函数定义数据无法和表单进行数据双向绑定

· Vue3 样式绑定

· 【Vue3】2-9 : class样式与style样式的三种形态

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

Vue3中props+v-bind+计算属性+CSS样式混合使用案例

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	<template>
	<DownOutlined class='collapse-icon'/>
	</template>

	<script setup lang='ts'>
	import {ref, reactive} from "vue"
	import {computed} from 'vue'

	const props = defineProps({
	expand: {type: Boolean},
	})
	// 展开/收起图标旋转转数
	const turn = computed(() => `${props.expand} ? 0 : 0.5}turn`);
	</script>

	<style lang="less" scoped>
	.collapse-icon {
	transform: rotate(v-bind(turn));
	transition: transform .3s;
	}
	</style>