1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.not / NPM / vue " > </script> 10 <style> 11 .red{ 12 color: red; 13 } 14 .thin{ 15 font-weight: 200; 16 } 17 .italic{ 18 font-style: italic; 19 } 20 .active{ 21 letter-spacing: 0.5em; 22 } 23 </style> 24- </ head > 25 26 < body > 27 < div the above mentioned id = "App" > 28 <-! <H1 class = "Red Thin"> This is a big, big H1, as large as you can not imagine! ! ! </ h1 of> -> 29 30 <-! a first use, a transfer between the array Note: class required here is to do data binding v-bind -> 31 is <-! <h1 of: class = "[ 'thin', 'italic']"> this is a big, big H1, as large as you can not imagine! ! ! </ h1 of> -> 32 33 is ! <- used in array Ternary expression -> 34 is - <! class = "[ 'Thin', 'Italic', In Flag ': h1 of <? <! - in objects in the array instead of a triplet of expressions to improve the readability of the code -> 37 [ <! - <h1 of: class = "[ 'Thin', 'Italic', { 'Active': flag}] "> this is a big, big H1, as large as you can not imagine! ! ! </ h1> -> 38 39 <-! 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 did not write marks; attribute value is an identifier -> 40 < h1 of : class = "{Red: to true, Thin: to true, Italic: to false, Active:} to false" > this is a very big H1, large that you can not imagine! ! ! </ H1 > 41 42 < h1 : class = "classObj" > This is a big, big H1, as large as you can not imagine! ! ! </ H1 of > 45 < Script > 46 is // Create Vue instance, to give the ViewModel 47 var VM = new new Vue ({ 48 EL: ' #app ' , 49 Data: { 50 In Flag: to true , 51 is classObj: {Red: to true , Thin: to true , Italic: to false , Active: to false } 52 is }, 53 is Methods: {} 54 is }); 55 </ Script > 56 is </body> 57 </html>