vue中的样式

一、使用class样式：

         CSS部分：　 

    <style>
        .green{
            color:green;
        }

        .italic{
            font-style:italic;
        }

        .thin{
            font-weight:200;
        }

        .active{
            /* 字符间距 */
            letter-spacing: 0.5em;
        }

    </style>

　　JS部分：

    var app = new Vue({
            el: "#app",
            data() {
                return {
                    flag:true,
                    styleObj:{green:true,thin:true}
                }
            }
        });

1. 数组　　

<h1 :class=['thin','italic']>这是一个H1标签的内容</h1>

　　2.数组中的三元表达式

<h1 :class=['thin','italic',flag?'active':'']>这是一个H1标签的内容</h1>

　　3.数组中嵌套对象

<h1 :class=['thin','italic',{'active':flag}]>这是一个H1标签的内容</h1>

　　4.直接使用对象

<h1 :class="{green:true,thin:true}">这是一个H1标签的内容</h1>

　　5.直接引用对象

<h1 :class="styleObj">这是一个H1标签的内容</h1>

二、使用内联样式

　　JS部分：

    var app = new Vue({
            el: "#app",
            data() {
                return {
                    flag:true,
                    styleObj:{green:true,thin:true},
                    cssObj:{color:'red','font-weight':200},
                    cssObj1:{'font-style':'italic'},
                }
            }
        });

　　1、直接使用CSS对象

<h1 :style="{color:'red','font-weight':200}">这是一个H1标签的内容</h1>

　　2、使用js对象

<h1 :style="cssObj">这是一个H1标签的内容</h1>

　　3、使用多个样式

<h1 :style=[cssObj,cssObj1]>这是一个H1标签的内容</h1>