【Vue3 从入门到实战 进阶式掌握完整知识体系】005-Vue语法基础：样式绑定语法

5、样式绑定语法

通过动态绑定 class 属性来控制样式的展示

<!DOCTYPE html>
<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库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <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: `
    <div :class='color'>
      {{ message }}
    </div>
    `
  });

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

</html>

运行结果

image-20210612183246615.png

通过 class 对象来控制样式的展示

<!DOCTYPE html>
<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库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <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: `
    <div :class='colorObject'>
      {{ message }}
    </div>
    `
  });

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

</html>

运行结果

image-20210612183628462.png

通过 class 数组来控制样式的展示

<!DOCTYPE html>
<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库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <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},
        // 时间：2021年06月15日 15时57分52秒
        // 补充：注意，这里的红色和绿色同时生效了，绿色是第二个属性值，所以将红色覆盖了
        colorArray: ['red', 'green', {big: true, small: true}]
      }
    },
    template: `
    <div :class='colorArray'>
      {{ message }}
    </div>
    `
  });

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

</html>

运行结果

image-20210612183941302.png

控制子组件样式的展示

<!DOCTYPE html>
<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库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <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: `
        <div :class='color'>
            {{ message }}
            <demo1></demo1>
            <demo2 class='green'></demo2>
            <demo3 class='green'></demo3>
        </div>
    `
  });

  // 最外层一个标签：可以在标签内定义 class
  app.component('demo1', {
    template: `
        <div class="green">zibo1</div>
    `
  });

  // 最外层一个标签：可以在使用子组件标签上定义 class
  app.component('demo2', {
    template: `
        <div>zibo2</div>
    `
  });

  // 最外层多个标签，无法在使用子组件标签上定义 class
  // 会报错：[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: `
        <div>zibo31</div>
        <div>zibo32</div>
    `
  });

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

</html>

运行结果

image-20210612185307663.png

demo3问题解决

<!DOCTYPE html>
<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库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <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: `
        <div :class='color'>
            {{ message }}
            <demo1></demo1>
            <demo2 class='green'></demo2>
            <demo3 class='green'></demo3>
        </div>
    `
  });

  // 最外层一个标签：可以在标签内定义 class
  app.component('demo1', {
    template: `
        <div class="green">zibo1</div>
    `
  });

  // 最外层一个标签：可以在使用子组件标签上定义 class
  app.component('demo2', {
    template: `
        <div>zibo2</div>
    `
  });

  // 最外层多个标签，无法在使用子组件标签上定义 class
  // 会报错：[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: `
        <div :class="$attrs.class">zibo31</div>
        <div :class="$attrs.class">zibo32</div>
    `
  });

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

</html>

运行结果

image-20210612185620777.png

动态绑定样式内容

<!DOCTYPE html>
<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库 -->
  <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'},
        // 也可以这么写
        myStyle2: 'color: red;'
      }
    },
    template: `
        <div :style='myStyle'>
            {{ message }}
        </div>
    `
  });

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

</html>

运行结果

image-20210612193559561.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容