VUE框架class属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <style>
        .c1{
            color: red;
        }
        .c2{
            
        }
    </style>


</head>
<body>

<div id="app">
    <div :class="{c1:true,c2:true}">HELLO VUE1</div>
    <div :class="{c1:isC1,c2:isC2}">HELLO VUE2</div>
    <div :class="styleObj">HELLO VUE3</div>
    <div :class="[styleObj1,styleObj2]">HELLO VUE4</div>
</div>

<script>

    // 数据驱动界面
    var vm = Vue.createApp({
        data(){
            return {
                isC1:false,
                isC2:true,
                styleObj:{
                    c1:true,
                    c2:true
                },
                styleObj1:{
                    c1:true
                },
                styleObj2:{
                    c2:true
                }
            }
        },
    }).mount("#app")
</script>

</body>
</html>
VUE框架class属性操作

相关文章
