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>
相关推荐
东风西巷2 分钟前
Atlantis Word Processor:全方位的文字处理专家
前端·学习·word·软件需求
今天不要写bug15 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优17 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k1008618 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐18 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
小圣贤君18 分钟前
小说写作中的时间轴管理:基于 Vue 3 的事序图技术实现
vue.js·electron·写作·甘特图·时间轴·事序图
Zz_waiting.19 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
writeone19 分钟前
9-10关于JS初学产生的问题
开发语言·javascript·ecmascript
一只小风华~22 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js