vue中class和style的用法:

来源：互联网发布：上海峰途网络编辑：程序博客网时间：2024/06/13 13:44

class和style的用法:

:class="" v-bind:class=""

:style="" v-bind:style=""

1.:class="[red]" red是数据

:class="[red,b,c,d]"

<style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <scriptsrc="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    red:'red',
                    b:'blue'
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <divid="box">
        <strong:class="[red,b]">文字...</strong>
    </div>
</body>

2.json

:class="{red:a, blue:false}"

1.<divid="box">
<strong:class="{red:true,blue:true}">文字...</strong>
</div>

2.<script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    a:true,
                    b:true
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <divid="box">
        <strong:class="{red:a,blue:b}">文字...</strong>
    </div>
</body>

3.json

:class="json"

data:{

json:{red:a, blue:false}

}

<script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    json:{
                        red:true,
                        blue:true
                    }
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <divid="box">
        <strong:class="json">文字...</strong>
    </div>
</body>

--------------------------

style:

:style="[c]"

:style="[c,d]"

注意: 复合样式，采用驼峰命名法

:style="json"

1.<divid="box">
<strong:style="{color:'red'}">文字...</strong>
</div>

2.<style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <scriptsrc="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    c:{color:'red'}
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <divid="box">
        <strong:style="[c]">文字...</strong>
    </div>
</body>

3.<style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <scriptsrc="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    c:{color:'red'},
                    b:{backgroundColor:'blue'}
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <divid="box">
        <strong:style="[c,b]">文字...</strong>
    </div>
</body>

4.<style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <scriptsrc="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    a:{
                        color:'red',
                        backgroundColor:'gray'
                    }
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <divid="box">
        <strong:style="a">文字...</strong>
    </div>
</body>

1 0