5、 Vue3 Class样式绑定

案例

<!--
 Class样式绑定
-->
<template>
  <div :class="{'class1': class1}">class1</div> <br>
  <div :class="class2">class2</div>
  <button @click="changeStyle">点击改变样式</button><br>
</template>

<script>
import { reactive, ref } from '@vue/reactivity';

export default {
    setup(){
        let class1 = ref(true);
        let class2 = reactive({
            class1: true,
            class2: true
        })
        let changeStyle = ()=>{
           class1.value = !class1.value
        }
        return {
            class2,
            class1,
            changeStyle
        } 
    }
}
</script>
<style>
.class1 {
  border: 1px solid red;
}
.class2 {
    font-size: 20px;
    color: red;
}
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容