vue in inline style

First, the use inline styles

Directly on the element 1. `: style` form of writing style object

<H1: style = "{color: 'red', 'font-size': '40px'}"> This is a kind of H1 </ h1>

 

2. The style object is defined to `data` and quote it directly to the`: style` in

(1) defined in the style data:

data: {

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

}

(2) in the element, in the form of binding properties, the style applied to the object element:

<H1: style = "h1StyleObj"> This is a kind of H1 </ h1>

 

3. In the `: style` by the array, a plurality of reference patterns on an object` data`

(1) defined in the style data:

 

data: {

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

        h1StyleObj2: { fontStyle: 'italic' }

}

(2) in the element, in the form of binding properties, the style applied to the object element:

<H1: style = "[h1StyleObj, h1StyleObj2]"> This is a kind of H1 </ h1>

 

Second, examples

< Body > 
  < div the above mentioned id = "App" > 
    <-! Object is a collection of key-value pairs of unordered -> 
    < 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 ({
      on: ' #app ' ,
      data: {
        styleObj1: { color: 'red', 'font-weight': 200 },
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });
  </script>
</body>