Vue学习：第四章 Class与Style绑定

梦见阳光。。

于 2019-02-21 22:50:50 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.youkuaiyun.com/weixin_44481301/article/details/87870065

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了在Vue框架中如何使用不同语法进行Class与Style的动态绑定，包括对象语法、数组语法以及它们的结合使用，展示了按钮样式和字体颜色、大小的动态变化实例。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class与Style绑定</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--绑定class-->
        <!--对象语法（键名为CSS类名，值为变量）-->
        <button :class="{btnStyle: useBtn, btnStyle2: useBtn2}">Button</button>

        <!--数组语法（数组元素为css类名）-->
         <button :class="[style, style2]">Button</button>

        <!--结合数组对象语法-->
        <button :class="[{btnStyle: useBtn}, style2]">Button</button>

        <!--绑定内联样式-->
        <!--对象语法（键名为样式名，键值为样式值）-->
        <div :style="{color: divColor, fontSize: divSize}">你好</div>

        <!--数组语法（元素为样式）-->
        <div :style="[style3, style4]">你好</div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
               useBtn: true,
               useBtn2: true,
               style: 'btnStyle',
               style2: 'btnStyle2',
               divColor: 'red',
               divSize: '50px',
               style3: {
                   color: 'red'
               },
               style4: {
                   fontSize: '90px'
               },
            },
        });
    </script>
</body>
<style type="text/css">
    .btnStyle {
        margin-top: 10px;
        color: red;
    }
    .btnStyle2 {
        margin-left: 10px;
    }
</style>
</html>