vueJS 006 css 样式了解_vue css helloworld-CSDN博客

本文链接：https://blog.csdn.net/helloWorldAndYou/article/details/104889365

本文通过实例详细介绍了Vue.js中不同样式绑定方式的应用，包括数组、变量、三元表达式及对象方式，展示了如何根据条件动态改变元素样式，提高代码可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 数组

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue2.6.11.js"></script>
    <style type="text/css">
        .red {
            color: red;
        }
        .size {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <label :class="['red', 'size']">灭绝植物：鄂西商陆</label>
</div>
<script>
    var vm = new Vue({
        el: '#app'
    });
</script>
</body>
</html>

2. 变量,数据绑定的方式

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue2.6.11.js"></script>
    <style type="text/css">
        .setRed {
            color: red;
        }
        .fstyle {
            font-style: italic;
        }
    </style>
</head>
<body>
<div id="app">
    <div :class="mystyle">灭绝植物：鄂西商陆</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            mystyle:{setRed:true,fstyle:true}
        }
    });
</script>
</body>
</html>

3. 三元表达式

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue2.6.11.js"></script>
    <style type="text/css">
        .setRed {
            color: red;
        }

        .fstyle {
            font-style: italic;
        }

        .active {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div :class="['setRed','fstyle',flag?'active':'']">灭绝植物：鄂西商陆</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            flag:true,
            mystyle:{setRed:true,fstyle:true}
        }
    });
</script>
</body>
</html>

4. 对象替代三元表达式，提高可读性

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue2.6.11.js"></script>
    <style type="text/css">
        .setRed {
            color: red;
        }

        .fstyle {
            font-style: italic;
        }

        .active {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div :class="['setRed','fstyle',{'active':flag}]">灭绝植物：鄂西商陆</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            flag:true,
            mystyle:{setRed:true,fstyle:true}
        }
    });
</script>
</body>
</html>