vue in class style

First, the use class style

1. Array

<H1: class = "[ 'red', 'thin']"> This is an evil H1 </ h1>

2. ternary expression array

<H1: class = "[ 'red', 'thin', isactive 'active':? '']"> This is an evil H1 </ h1>

3. The array of nested objects

<H1: class = "[ 'red', 'thin', { 'active': isactive}]"> This is an evil H1 </ h1>

4. Objects directly

<H1: class = "{red: true, italic: true, active: true, thin: true}"> This is an evil H1 </ h1>

Second, examples

<style>
    .red {
      color: red;
    }

    .thin {
      font-weight: 200;
    }

    .italic {
      font-style: italic;
    }

    .active {
      letter-spacing: 0.5em;
    }
  </style>
</head>

<body>
  <div id="app">
    <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 -> 
    < h1 of : class = "[ 'Thin', 'Italic' ] " > this is a big, big H1, as large as you can not imagine! ! ! </ H1 > 

    <-! Ternary expression in the array -> 
    < h1 : class = "[? 'Thin', 'Italic', Flag 'the Active': '']" > This is a big great H1, as large as you can not imagine! ! ! </ H1 of > 

    <-! Used objects in the array instead of a triplet of expressions to improve the readability of the code -> 
    < h1 of : class = "[ 'Thin', 'h1 > 

    ! <- when using v-bind bound objects to class, property of the object class name, due to the properties of an object can be quoted, or without quotation marks, so here I did not write the quotes; value of the property is an identifier -> 
    < h1 : class = "classObj" > this is a big, big H1, as large as you can not imagine! ! ! </ H1 of > 


  </ 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: to true , Italic: false, active: false }
      },
      methods: {}
    });
  </script>
</body>

Guess you like