How Vue which binding style attribute?

In Vue binding style attribute which can be used in the v-bind: class = "" and V the bind-: style = "" , both of which can accept the variable / array / objects different point. V the bind-: class which bind variables values are class , pointing to the corresponding class selector style sheet , and v-bind: style value which is bound to a variable in css property called keys , to css key attribute value of key-value pairs , which species need to key objects pass in the form, may be used an array of a plurality of stylesheet objects pass in. the following shows the simple use of two methods to achieve the same effect.

:class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
  <style>
      .style1 {
          width: 100px; height: 100px; background-color: tomato;
      }
      .style2 {
          margin: 0 auto;
          border-radius: 15px;
      }
  </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="{style1,style2}"></div>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app",
            data: {
                style1: "style1",
                style2: "style2"
            }
        })
    </script>
</body>
</html>

:style

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
  <style>
      .style1 {
          width: 100px; height: 100px; background-color: tomato;
      }
      .style2 {
          margin: 0 auto;
          border-radius: 15px;
      }
  </style>
</head>
<body>
    <div id="app">
        <div v-bind:style="[style1,style2]"></div>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app",
            data: {
                style1: {
                    "width": "100px",
                    "height": "100px",
                    "background-color": "tomato"
                },
                style2: {
                    "margin": "0 auto",
                    "border-radius": "15px"
                }
            }
        })
    </script>
</body>
</html>

effect

How Vue which binding style attribute?

Guess you like