Vueでスタイルを使う
クラススタイルを使う

配列

       H1

配列には、3元式

が使われています.

       H1

配列におけるネストオブジェクト

       H1

直接使用対象

       H1

完全コード:

  
  
  
  
  
  



  

    

    
    

    
    

    
    

    
    
         H1，       ！！！


  

  
    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        classObj: { red: true, thin: true, italic: false, active: false }
      },
      methods: {}
    });
  

インラインスタイルを使う

直接要素に:styleの形式を通して、スタイルオブジェクト

を書く.

       H1

は、スタイルオブジェクトをdataに定義し、:styleの

に直接参照する.

dataにスタイルを定義する:

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

要素では、属性バインディングの形で、スタイルオブジェクトを要素に適用します.

       H1

は、:styleの配列を通して、複数のdata上のスタイルオブジェクト

を参照する.

dataにスタイルを定義する:

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

要素では、属性バインディングの形で、スタイルオブジェクトを要素に適用します.

       H1

完全コード:

  
  
  
  
  



  

    
    

    
    h1
  

  
    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'red', 'font-weight': 200 },
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });