vue3Class 与 Style 绑定

绑定 HTML class

  1. 绑定对象
javascript 复制代码
<div :class="{ active: isActive }"></div>

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
//<div class="static active"></div>

const isActive = ref(true)
const hasError = ref(false)

----------------------------------------------
或者
<div :class="classObject"></div>
const classObject = reactive({
  active: true,
  'text-danger': false
})
//<div class="active"></div>

----------------------------------------------
或者返回计算属性
<div :class="classObject"></div>
const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

2.绑定数组

javascript 复制代码
<div :class="[activeClass, errorClass]"></div>
//<div class="active text-danger"></div>
const activeClass = ref('active')
const errorClass = ref('text-danger')


如果是有条件的渲染某一个class
<div :class="[isActive ? activeClass : '', errorClass]"></div>
也可以写成在数组里面再写一个对象
<div :class="[{ [activeClass]: isActive }, errorClass]"></div>

通过判断isActive 的值来渲染class
  1. 在组件上使用
javascript 复制代码
<!-- 在使用组件时 -->
<MyComponent class="baz boo" />

<!-- 子组件模板 -->
<p class="baz boo">Hi!</p>

这些 class 会被添加到组件的根元素上并与该元素上已有的 class 合并

如果组件有多个根元素时,可以使用$attrs来接收哪一个根元素添加

javascript 复制代码
<MyComponent class="baz" />

组件需要添加class的根元素上使用$attrs来接收
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
最后渲染为:
<p class="baz">Hi!</p>
<span>This is a child component</span>

绑定内联样式

  1. 绑定对象
javascript 复制代码
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
const activeColor = ref('red')
const fontSize = ref(30)

------------------------------------------------------

<div :style="{ 'font-size': fontSize + 'px' }"></div>

------------------------------------------------------
<div :style="styleObject"></div>
const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})
也可以使用计算属性
  1. 绑定数组
javascript 复制代码
<div :style="[baseStyles, overridingStyles]"></div>
相关推荐
七度光阴;3 分钟前
Web后端登录认证(会话技术)
前端·tlias智能辅助系统
菜鸟una1 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'3 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge9 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再9 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴10 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生10 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定