5. Style binding syntax

Control the presentation of styles by dynamically binding class attributes

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <style>
      .red{
          color: red;
      }
      .green{
          color: green;
      }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".color: 'red'}},template: ` 
       

         {{ message }} 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Control the presentation of styles through class objects

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <style>
      .red{
          color: red;
      }
      .green{
          color: green;
      }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".color: 'red'.colorObject: {red: false.green: true}}},template: ` 
       

         {{ message }} 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Control the presentation of styles through the class array

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <style>
      .red{
          color: red;
      }
      .green{
          color: green;
      }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".color: 'red'.colorObject: {red: false.green: true},
        // Time: 15:57:52 on June 15, 2021
        // Add: note that both red and green are in effect here, green is the second attribute value, so red is overwritten
        colorArray: ['red'.'green', {big: true.small: true}}},template: ` 
       

         {{ message }} 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Controls the presentation of child component styles

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <style>
    .red {
      color: red;
    }

    .green {
      color: green;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".color: 'red'.colorObject: { red: false.green: true },
        colorArray: ['red'.'green', { big: true.small: true}}},template: ` 
       

         {{ message }} 
         
         
         
       
 `
  });

  // The outermost tag: you can define the class within the tag
  app.component('demo1', {
    template: ` 
       

        zibo1
       
 `
  });

  // The outermost tag: you can define the class using the child component tag
  app.component('demo2', {
    template: ` 
       

        zibo2
       
 `
  });

  // The outermost tag, cannot define the class using the child component tag
  [Vue WARN]: Extraneous non-props Attributes (class)
  // were passed to component but could not be automatically inherited 
  // because component renders fragment or text root nodes. 
  // at <Demo3 class="green" > at <App>
  app.component('demo3', {
    template: ` 
       

        zibo31
       
 
       

        zibo32
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Demo3 problem solved

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <style>
    .red {
      color: red;
    }

    .green {
      color: green;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".color: 'red'.colorObject: { red: false.green: true },
        colorArray: ['red'.'green', { big: true.small: true}}},template: ` 
       

         {{ message }} 
         
         
         
       
 `
  });

  // The outermost tag: you can define the class within the tag
  app.component('demo1', {
    template: ` 
       

        zibo1
       
 `
  });

  // The outermost tag: you can define the class using the child component tag
  app.component('demo2', {
    template: ` 
       

        zibo2
       
 `
  });

  // The outermost tag, cannot define the class using the child component tag
  [Vue WARN]: Extraneous non-props Attributes (class)
  // were passed to component but could not be automatically inherited 
  // because component renders fragment or text root nodes. 
  // at <Demo3 class="green" > at <App>
  // Bind the attribute value of the parent tag
  app.component('demo3', {
    template: ` 
       

        zibo31
       
 
       

        zibo32
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Bind style content dynamically

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".myStyle: {color: 'red'},
        // You can also write it this way
        myStyle2: 'color: red; '}},template: ` 
       

         {{ message }} 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results