Vue之class的用法

Posted 2020-10-11 逗比煎饼侠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue之class的用法相关的知识，希望对你有一定的参考价值。

Vue中class的使用总结如下：

使用形式v-bind:class 简写:class

1.在数组中使用一个class

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>VUE</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
        .red{  
            color: red;  
        }  
        .blue{  
            background: blue;  
        }  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:‘#box‘,  
                data:{  
                    color:‘blue‘  
                },  
                methods:{  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <strong :class="[color]">文字...</strong>  
    </div>  
</body>  
</html>

描述：

1）

a) <strong :class="[color]">文字...</strong>

b) data:{
color:‘blue‘
}

两者的color名称是对应一致的

a) data:{
color:‘blue‘
},

b) .blue{
background: blue;
}

两者的blue名称是对应一致的。

2.在数组中使用多个class

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
        .red{  
            color: red;  
        }  
        .blue{  
            background: blue;  
        }  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:‘#box‘,  
                data:{  
                    red:‘red‘,  
                    b:‘blue‘  
                },  
                methods:{  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <strong :class="[red,b]">文字...</strong>  
    </div>  
</body>  
</html>

描述：

原理和上述使用一个数组一样

3.使用对象形式

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
        .red{  
            color: red;  
        }  
        .blue{  
            background: blue;  
        }  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:‘#box‘,  
                data:{  
                },  
                methods:{  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <strong :class="{red:true,blue:true}">文字...</strong>  
    </div>  
</body>  
</html>

描述：

使用对象的形势的时候，<strong :class="{red:true,blue:true}">文字...</strong>,其中的red,blue都是class的名字，

和数组形势的时候不一样。当为true的时候，显示对应的样式，为false的时候，隐藏对应的样式。现在都是true，

所以文字颜色是红色。背景是蓝色

4.使用对象形式。不同于上一个。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
        .red{  
            color: red;  
        }  
        .blue{  
            background: blue;  
        }  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:‘#box‘,  
                data:{  
                    a:true,  
                    b:false  
                },  
                methods:{  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <strong :class="{red:a,blue:b}">文字...</strong>  
    </div>  
</body>  
</html>

描述：

和第三种不同的是，使用了a,b两个变量，然后在data中设置a,b的布尔值，从而实现class的显示和隐藏。true

显示，false隐藏。

以上是关于Vue之class的用法的主要内容，如果未能解决你的问题，请参考以下文章