Vue.js学习（六）-绑定样式

最新推荐文章于 2024-04-08 15:47:31 发布

飞不起来的小菜鸟

最新推荐文章于 2024-04-08 15:47:31 发布

阅读量275

点赞数

分类专栏： Vue.js 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_29107721/article/details/125025037

版权

本文介绍了Vue.js中如何动态绑定class样式和CSS样式。对于class样式，讲解了字符串、对象和数组三种不同的绑定方式，适用于不同场景。在绑定CSS样式时，提到了使用`:style`指令结合对象或数组来设置动态的样式属性值，注意驼峰命名规则和避免使用连字符的样式名称。

摘要由CSDN通过智能技术生成

绑定class样式

class样式
1. 写法:class=“xxx”，xxx可以是字符串、对象、数组
2. 字符串写法适用于：类名不确定，需要动态获取
3. 对象写法适用于：需要绑定多个样式，个数和名字不确定
4. 数组写法适用于：需要绑定多个样式，个数和名字确定，但不确定用不用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>绑定样式</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            .basic {
     
                width: 300px;
                height: 80px;
                border: 1px solid black;
                text-align: center;
                line-height: 80px;
            }
            .happy {
     
                background-color: orange;
            }
            .sad {
     
                background-color: dimgray;
            }
            .normal {
     
                background-color: bisque;
            }
            .show1 {
     
                background-color: cyan;
            }
            .show2 {
     
                font-size: 30px;
                font-weight: bold;
            }
            .show3 {
     
                border-radius: 30px;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h1>绑定class样式</h1>
            
            <!-- 绑定class样式-字符串写法，适用于：样式类名不确定，需要动态指令 -->
            <h3>点击div时修改样式为 happy</h1>

最低0.47元/天解锁文章

飞不起来的小菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习（六）-绑定样式

文章目录绑定class样式绑定CSS样式绑定class样式class样式1. 写法:class=“xxx”，xxx可以是字符串、对象、数组2. 字符串写法适用于：类名不确定，需要动态获取3. 对象写法适用于：需要绑定多个样式，个数和名字不确定4. 数组写法适用于：需要绑定多个样式，个数和名字确定，但不确定用不用<!DOCTYPE html><html> <head> <meta charset="UTF-8" />
复制链接

扫一扫

专栏目录