1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src= "./ lib / VUE-2.4.0.js" > </ Script >
. 9 <-! Use class style:
10 1, the array directly passing an array, Note: this class needs to do to use data binding v-moddel set
. 11 2 ternary expression array
12 is 3, the array of objects in the object using nested array of alternative triplet of expressions to improve the readability of the code
13 is 4, the direct use of the object
14 ->
15 </ head >
16 < style >
. 17 .red {
18 is Color : Red ;
. 19 }
20 is .thin {
21 is font-weight : 200 is ;
22 is }
23 is .italic {
24 font-style : Italic ;
25 }
26 is .active {
27 Letter-spacing : 0.5em ; / * // spacing characters * /
28 }
29 </ style >
30 < body >
31 is < div ID = "App" >
32 <-! a first: an array array passed directly, note: class required here is to do data binding v-moddel ->
33 is < h1 of : class = "[ 'Red', ' Thin '] " >The first: understand the array</ H1 of >
34 is <-! Second: an array ternary expressions ->
35 < h1 of : class = "[? 'Red', In Flag 'Active': '']" > second: ternary array expression </ h1 of >
36 <-! third: the array used in the array nested objects replace ternary expressions with an object to improve the readability of the code ->
37 [ < h1 of : class = "[ 'Red', 'Italic', { 'Active': in Flag}]" > third: nested object array </ h1 of >
38 is <!- Fourth: the object directly when using V-bind to the binding object class, attribute of the object class name,
39 due to the properties of the object can not be quoted quotation marks, so there is no write marks; attribute value It is an identifier ->
40 <! -<h1: class = "{red : true, thin: true, italic: true, active: false}"> Fourth: Object directly </ h1 of> ->
41 is < h1 of : class = "classObj" > section four kinds: objects directly </ h1 of >
42 is
43 is <-! <h1 of class = "Red Thin"> the this IS A Letter </ h1 of> ->
44 is
45 </ div >
46 is < Script >
47 // Create examples Vue give the ViewModel
48 var VM = new new Vue ({
49 EL: " #app " ,
50 data:{
51 In Flag: to true , // second: a ternary array expression / a third: nested object in the array
52 is classObj: {Red: to true , Thin: to true , Italic: to true , Active: to false },
53 is } ,
54 is Methods: {}
55 })
56 is </ Script >
57 is </ body >
58 </ HTML >