css 动态写法 vue3 选项式 组合式

<template>
	<view class="cssVar">
		选项式
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style_sam:{
					color: '#00f70f',
					backgroundColor: 'red',
					border: '10px solid #ff6300'
				}
			}
		},
		onLoad() {
			console.log('onLoad',this.style_sam)
		},
		methods: {
		
		}
	}
</script>

<style lang="scss">
.cssVar{
		color: v-bind('style_sam.color');
		background-color: v-bind('style_sam.backgroundColor');
		border: v-bind('style_sam.border');
	}
</style>

组合式

<template>
	<view>
		<view :class="[$style.div,$style.border]">
			CSS module 用法
		</view>
		<view class="nomodule cssBorder" @click="cssClick">
			CSS 命名 module 用法
		</view>
		<view class="cssVar" @click="vueClick">
			cssVar写法 跳转选项式
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	const style_sam = ref({
		color: '#00f70f',
		backgroundColor: 'red',
		border: '5px solid #ff6300'
	})
	const cssClick = () => {
		console.log('cssClick')
		uni.navigateTo({
			url: '/pages/cssdemo/cssmodule'
		})
	}
	const vueClick = ()=>{
		uni.navigateTo({
			url: '/pages/cssdemo/vue2css/vue2css'
		})
	}
</script>
<style lang="scss" scoped>
	.nomodule {
		color: white;
		background-color: #3300ff;
	}
	.cssVar{
		color: v-bind('style_sam.color');
		background-color: v-bind('style_sam.backgroundColor');
	}
	.cssBorder{
		border: v-bind('style_sam.border');
	}
</style>
<style module>
	.div {
		color: red;
	}

	.border {
		border: #3300ff 1px solid;
	}
</style>

module

<template>
	<view class="">
		<view :class="[sam.div,sam.bg]">css module 命名</view>
	</view>
</template>

<script setup lang="ts">
import { ref, useCssModule } from 'vue';
const samM = useCssModule('sam')
console.log(samM)
</script>

<style module="sam">
	.div {
		color: white;
	}
	.bg{
		background-color: red;
	}
</style>