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>

 

posted @   呼长喜  阅读(183)  评论(0)  编辑  收藏  举报
相关博文：
·  VUE框架 组件流程
·  VUE框架的使用
·  前端基础-04VUE基础01
·  vue之hello
·  VUE基本命令（{{str}}、v-text、v-html、v-bind、v-on:click、@click、onclick、v-model、v-for、v-if、v-show）
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手