<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> .red { color: red; } .thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <!-- 原生的class的写法 --> <h1 class= "Red Thin" > This is a big, big H1, as large as you can not imagine! ! ! </ H1 of > <-! A first use, a direct transfer array Note: class required here is to make databinding v-bind -> < H2 : class = "[ 'Thin', 'Italic' ] " > this is a big, big H2, as large as you can not imagine! ! ! </ H2 > <-! A second use, ternary expressions in the array -> < H3 : class = "[ 'Thin', 'Italic', In Flag 'Active': ''?]" > this is a big, big H3, as large as you can not imagine! ! ! </ H3 > <-! Third use, the use of objects in the array instead of a triplet of expressions to improve the readability of the code -> < H4 :This is a big, big H4, as large as you can not imagine! ! ! </ H4 > <-! Fourth use, when using the v-bind to the binding class object, the object's properties is the class name, due to the properties of an object can be quoted, or without quotation marks, so here I I did not write the quotes; value of the property is an identifier -> < H5 : class = "classObj" > this is a big, big H5, large you can not imagine! ! ! </ H5 > </ div > < Script > // Create Vue instance, to give the ViewModel var VM = new new Vue ({ EL: ' #app ' , Data: { In Flag: to true , classObj: {Red: to true, thin: true, italic: true, active: true } }, methods: {} }); </script> </body> </html>