v-model-- two-way data binding ---: class control style -: style

<!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>
</head> 

< Body > 
  < div ID = "App" > 
    < H4 > {{MSG}} </ H4 > 

    <-! V-binding the bind only one-way data binding from M to automatically V, not binding implementation of bidirectional data   -> 
    <-! <INPUT type = "text" the bind-V: value = "MSG" style = "width: 100%;"> -> 

    ! <- using the v-model instructions, and form elements can be achieved in two-way data binding data Model -> 
    <! - Note: v-model can only be used in form elements -> 
    ! <- the INPUT (Radio, text, address, Email ....) the CheckBox the TextArea the SELECT    -> 
    < the INPUT of the type = "text" style="width:100%;"Model-v = "msg" > 
  </ div > 

  < Script > 
    // create Vue instance, get ViewModel 
    var vm =  new new Vue ({ 
      EL: ' #app ' , 
      the Data: { 
        msg: ' We are good students, love knock Code, love of learning and thinking, is simply perfect, no flaws! ' 
      }, 
      Methods: { 
      } 
    }); 
  </ Script > 
</ body > 

</ HTML >

<!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 is ; 
    } 

    .italic { 
      font-style : Italic ; 
    } 

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

< body > 
  < div the above mentioned id = "App" > 
    <-! <h1 class = "Red Thin"> this is a big, big H1, as large as you can not imagine! ! ! </ h1 of> ->

    Using a first embodiment, a direct transfer array Note: class required here is to make databinding v-bind -> 
    <-! <H1 of: class = "[ 'Thin', 'Italic']"> This It is a big, big H1, as large as you can not imagine! ! ! </ h1 of> -> 

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

    <-! used in place of the object in the array a triplet of expressions to improve readability of the code -> 
    <-! <h1 of: class = "[ 'Thin', 'Italic' , { 'active': flag} ] "> this is a big, big H1, as large as you can not imagine! ! ! </ h1> -> 

    <-! When using the 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 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>


  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        classObj: { red: true, thin: true, italic: false, active: false }
      },
      methods: {}
    });
  </script>
</body>

</html>

<!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>
</head> 

< Body > 
  < div the above mentioned id = "App" > 
    ! <- object is the key-value pairs of unordered collection -> 
    <-! <H1: style = "styleObj1"> this is an h1 </ h1> - -> 

    < h1 of : style = "[styleObj1, styleObj2]" > this is a h1 of </ h1 of > 
  </ div > 

  < Script > 
    // Create Vue instance, to give the ViewModel 
    var VM =  new new Vue ({ 
      EL: ' #app ' , 
      Data: { 
        styleObj1:{ color: 'red', 'font-weight': 200 },
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });
  </script>
</body>

</html>

v-model-- two-way data binding ---: class control style -: style

Guess you like