【Vue 从入门到实战进阶式掌握完整知识体系】005

2025-07-24 01:56:52

【Vue 从入门到实战进阶式掌握完整知识体系】005 5、样式绑定语法通过动态绑定 class 属性来控制样式的展示代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

【Vue 从入门到实战进阶式掌握完整知识体系】005

5、样式绑定语法

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
  <!-- 样式 -->
  <style>
      .red{
          color: red;
      }
      .green{
          color: green;
      }
  </style>
</head>

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

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        color: 'red'
      }
    },
    template: `
    <div :class='color'>
      {{ message }}
    </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061218246615.png

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
  <!-- 样式 -->
  <style>
      .red{
          color: red;
      }
      .green{
          color: green;
      }
  </style>
</head>

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

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        color: 'red',
        colorObject: {red: false, green: true}
      }
    },
    template: `
    <div :class='colorObject'>
      {{ message }}
    </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061218628462.png

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
  <!-- 样式 -->
  <style>
      .red{
          color: red;
      }
      .green{
          color: green;
      }
  </style>
</head>

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

<script>
  ct app = ({
    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>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106121894102.png

控制子组件样式的展示

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
  <!-- 样式 -->
  <style>
    .red {
      color: red;
    }

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

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

<script>
  ct app = ({
    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>
            <demo class='green'></demo>
        </div>
    `
  });

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

  // 最外层一个标签：可以在使用子组件标签上定义 class
  appponent('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 <Demo class="green" > at <App>
  appponent('demo', {
    template: `
        <div>zibo1</div>
        <div>zibo2</div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106121850766.png

demo问题解决

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
  <!-- 样式 -->
  <style>
    .red {
      color: red;
    }

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

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

<script>
  ct app = ({
    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>
            <demo class='green'></demo>
        </div>
    `
  });

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

  // 最外层一个标签：可以在使用子组件标签上定义 class
  appponent('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 <Demo class="green" > at <App>
  // 下面把这个问题解决了：绑定父标签的属性值
  appponent('demo', {
    template: `
        <div :class="$">zibo1</div>
        <div :class="$">zibo2</div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210612185620777.png

动态绑定样式内容

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        myStyle: {color: 'red'},
        // 也可以这么写
        myStyle2: 'color: red;'
      }
    },
    template: `
        <div :style='myStyle'>
            {{ message }}
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061219559561.png本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除vue基础入门语法class

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200310.html

推荐阅读

留言与评论（共有 18 条评论）

本站网友给脸不要脸	6分钟前发表
` <div class="green">zibo1</div> ` }); // 最外层一个标签：可以在使用子组件标签上定义 class appponent('demo2'
本站网友嘉兴酒店	28分钟前发表
` <div class="green">zibo1</div> ` }); // 最外层一个标签：可以在使用子组件标签上定义 class appponent('demo2'
本站网友桂峰山	12分钟前发表
color
本站网友厦门信息网	29分钟前发表
class="$">zibo2</div> ` }); ct vm = ('#root'); </script> </html>运行结果image-20210612185620777.png动态绑定样式内容代码语言：javascript代码运行次数：0运行复制<!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
本站网友廉租房政策	1分钟前发表
class='color'> {{ message }} <demo1></demo1> <demo2 class='green'></demo2> <demo class='green'></demo> </div> ` }); // 最外层一个标签：可以在标签内定义 class appponent('demo1'
本站网友 wet	8分钟前发表
Extraneous non-props attributes (class) // were passed to component but could not be automatically inherited // because component renders fragment or text root nodes. // at <Demo class="green" > at <App> // 下面把这个问题解决了：绑定父标签的属性值 appponent('demo'
本站网友上吊	13分钟前发表
red; } .green { color
本站网友曾振国	12分钟前发表
{ big
本站网友贵定吧	1分钟前发表
{ red
本站网友三春	3分钟前发表
` <div>zibo2</div> ` }); // 最外层多个标签
本站网友万卷经书曾读过	0秒前发表
true }] } }
本站网友武汉肝病医院	6分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> <!-- 样式 --> <style> .red{ color
本站网友什么时候练瑜伽最好	3分钟前发表
colorArray
本站网友 casshern	8分钟前发表
"Hello World!"
本站网友陈树军	15分钟前发表
分享自作者个人站点/博客
本站网友清热解毒片	5分钟前发表
'green'
本站网友生化危机恶化高清	19分钟前发表
true }] } }

【Vue 从入门到实战进阶式掌握完整知识体系】005