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

最新推荐文章于 2024-04-30 09:17:26 发布
最新推荐文章于 2024-04-30 09:17:26 发布
阅读量1.2k 收藏 1
点赞数 3
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44635198/article/details/113609310
版权
  • 我们可以利用v-bind:style来绑定一些CSS内联样式。
  • 在写CSS属性名的时候，比如font-size

    • 我们可以使用驼峰式 (camelCase) fontSize

    • 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

      <!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>

在这里插入图片描述

lzh~
关注
专栏目录
coderwhy前端课程笔记|vue基础教程|v-memo,v-pre,v-clock,v-html,v-once,v-text,v-bind绑定属性，基本属性，class,style属性，musta
VAN
04-13 39
在开发中，有时候我们的元素class也是动态的，比如：当数据为某个状态时，字体显示红色。当数据另一个状态时，字体显示黑色。绑定class有两种方式：对象语法数组语法对象语法：我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class。--1.普通的绑定方式.<--2.对象绑定。-->:<--动态切换class是否加入：[类（变量）:[类（变量）:boolean(true/false]]-->--3.案例练习。-->
CSS 中的 v-bind()
柑橘乌云_
03-29 2667
实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。：如果需要给v-bind()值添加单位那么可以通过calc。这个语法同样也适用于。
vue-class和style的绑定，style属性的名称要用驼峰命名方式，如果没用驼峰要加引号
qq_42039912的博客
07-06 965
<body> <div id="app"> <p v-bind:class="{active: done}" v-bind:style="{backgroundColor: bgc}">哈哈哈，是的嘛</p> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> var app = new Vue({ el: .
v-bind in css
Raccon_的博客
12-15 1446
笔记
[Vue] CSS中的v-bind
最新发布
2301_79644036的博客
04-30 291
自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。但其实在单文件组件(SFC)中，：（截取自Vue官方文档）如上图第18行代码，使用。
CSS中使用v-bind
weixin_49965757的博客
12-04 235
【代码】CSS中使用v-bind。
Vue学习笔记：v-bind动态绑定style
sweetYinger的博客
01-27 450
Vue学习笔记：v-bind动态绑定style一、对象语法二、数组语法 ■可以利用v-bind：style来绑定一些CSS内联样式 ■在写CSS属性名的时候，比如font-size — □可以使用驼峰式：fontSize — □或短横线分隔：‘font-size’ ■绑定style的两种方式：对象语法，数组语法 一、对象语法 ■style后面跟的是一个对象类型 —→对象的key是CSS的属性 —→对象的value是具体赋的值，值可以来自data中的属性 <div id="app"> <
VUE之v-bind类名与样式绑定
zuomengjia的博客
10-15 366
课程 （1）v-bind回顾 （2）class-对象语法 （3）class-数组语法 （4）内联样式style-对象语法 （5）内联样式style-计算属性语法 前言 DOM元素经常动态绑定一些类名或者style样式，本节讲解下使用v-bind指令绑定class与style的多种方法。 之前介绍过v-bind基本用法及语法糖，主要用于动态更新HTML元素属性，接下来简...
Vue-关于内联样式style绑定
qq_44859912的博客
11-12 2943
原本准备把style绑定和class绑定写在一起的，但我还是分开了，对class绑定不太清楚的伙伴也可以先去看看上篇Vue-关于class绑定（基础学习）_绍昆ya的博客-CSDN博客 关于内联样式style的绑定和class名的绑定有些一样，也分为对象语法和数组语法，具体我们往下看。 首先我们先看对象语法 对象语法： v-bind:style的对象语法十分直观——看起来=很像 CSS，但其实是一个 JavaScript 对象。 我们来看看原本内联...
共同学习Vue.js --- Vue数据绑定
weixin_47081743的博客
11-23 446
文章目录一、数据绑定v-bind 介绍v-bind 案例:v-bind 绑定classv-bind 绑定class 案例一: 对象语法v-bind 绑定class 案例二: 数组语法v-bind 绑定class 案例三:v-bind 绑定style 样式v-bind 绑定style 样式案例一:v-bind 绑定style 样式案例二: 数组语法二、计算属性什么是计算属性计算属性案例一:计算属性案例二:总结 一、数据绑定 v-bind 介绍 在项目中除了内容需要我们动态决定外,某些属性也要动态来绑定; 比
CSS属性列表
04-08
CSS属性列表 CSS属性列表
Vue3新属性 — css中使用v-bind（v-bind in css）
热门推荐
charlatans的博客
08-11 3万+
v-bind() in css并没有进行劫持或者其他操作，他主要完成的任务是将v-bind()中的内容通过自定义属性的方式进行了重新定义，在编译后代码中可以看到
css中v-bind使用
renfeideboke的博客
11-16 230
css中v-bind使用
Vue教程-Vue语法糖与v-bind绑定CSS样式-学习vue第一站深入浅出（五）
精品小程序实战教程
07-02 1618
语法糖 v-bind和v-on指令都提供了缩写方式： v-bind缩写为：“：” v-on缩写为：“@” 可以动态更新H5元素属性，示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue语法糖-示例</title> <...
css选择器，js函数声明方式，原型，bind/on,live/bind,委托机制
卷尾巴
09-25 157
一 、css有哪几种选择器？ 1.基本选择器 id选择器 class选择器 2.属性选择器 基本选择器【属性=‘属性值’】{} 3.伪类选择器 4.层级选择器二、 js中声明函数的三种方式 1.函数声明方式 function sum(){} 2.函数表达式声明方式 var ...
wex5 教程 之 图文讲解 bind-css和bind-sytle的异同
weixin_30319153的博客
12-14 57
wex5作为网页开发利器，在前台UI数据交互设计中大量使用了绑定技术，即官方视频教学中也提到了KO,实质是数据绑定与追踪。在前台组件的属性中，为我们提供了两个重要的样式绑定属性，bind-css和bind-style.这两个属性都能动态的为组件或元素绑定样式，那么含义和用法有什么异同呢？ 先来看两个例子： 一..bind-css案例： 组件属性设置:...
VUE day3 v-bind指令绑定属性（class，style）
weixin_46383150的博客
03-15 387
v-bind指令 vue中，v-bind用来动态的绑定属性，当使用v-bind绑定元素的属性时，将从vue实例中查找所绑定的变量. v-bind的格式是 v-bind：属性名="" ,简写为： 如： <a v-bind:href="url1">百度一下</a> //简写为 <a :href="url1">百度一下</a> new Vue({ e...
2021-07-06 使用v-bind设置样式属性:class与style设置元素样式
GAARA
07-06 664
设置vuev-bind:classv-bind:style v-bind:class v-bind:style
Vue动态属性绑定详解：v-bind指令
"本文主要介绍Vue.js中的动态属性数据绑定，特别是v-bind指令的使用方法和常见应用场景。" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。在Vue中，数据绑定是其核心特性之一，它允许开发者将数据模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lzh~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值