VUE3与Uniapp 三 (Class变量和内联样式)

xml 复制代码
<template>
	<!-- 通过class绑定开启或关闭某个CSS -->
	<view class="box" :class="{box2:true}">box1</view>
	<view class="box" :class="{box2:isActive}">box2</view>
	
	<!-- 使用三元表达式实现开启关闭CSS的效果 -->
	<view class="box" :class="true ? 'box2' : ''">box3</view>
	
	<view :style="{width:'300px', height:300 + 'px', fontSize:size + 'px', border:'1px solid red'}">
		Hello World
	</view>
</template>

<script setup>
	import {ref} from "vue";
	
	let isActive = ref(false);
	let size = ref(60);
</script>

<style lang="scss">
	.box{
		width:300px;
		height:300px;
		background-color: red;
		margin: 10px;
	}
	
	.box2{
		background-color: green;
	}
</style>
相关推荐
jingling5553 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录8 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00009 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl10 分钟前
深度剖析Kafka读写机制
前端
FogLetter11 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan11 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan12 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan14 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录14 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee14 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化