v-bind绑定style时css属性名的写法（驼峰和短横线）

最新推荐文章于 2024-04-29 15:00:49 发布

都挺好，刚刚好

最新推荐文章于 2024-04-29 15:00:49 发布

阅读量747

点赞数

分类专栏：工作文章标签： css html

原文链接：https://blog.csdn.net/weixin_44635198/article/details/113609310?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163289787716780269885340%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163289787716780269885340&b

版权

工作专栏收录该内容

18 篇文章 0 订阅

订阅专栏

我们可以利用v-bind:style来绑定一些CSS内联样式。
在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size


```bash
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2 :style="{'font-size': '50px'}">{{message}}</h2>
        <h2 :style="{fontSize:finalSize + 'px'}">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                finalSize: 100
            }
        })
    </script>
</body>
</html>

都挺好，刚刚好

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
v-bind绑定style时css属性名的写法（驼峰和短横线）

我们可以利用v-bind:style来绑定一些CSS内联样式。在写CSS属性名的时候，比如font-size我们可以使用驼峰式 (camelCase) fontSize或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size```bash<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&lt.
复制链接

扫一扫