vue3Class 与 Style 绑定
绑定 HTML class
1. 绑定对象
<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.绑定数组
<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 的值来渲染class3. 在组件上使用
<!-- 在使用组件时 -->
<MyComponent class="baz boo" />
<!-- 子组件模板 -->
<p class="baz boo">Hi!</p>
这些 class 会被添加到组件的根元素上并与该元素上已有的 class 合并如果组件有多个根元素时,可以使用$attrs来接收哪一个根元素添加
<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. 绑定对象
<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'
})
也可以使用计算属性
2. 绑定数组
<div :style="[baseStyles, overridingStyles]"></div>原文地址：https://blog.csdn.net/m0_61368323/article/details/145082131
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！