Vue 动态绑定样式(v-bind:style) 中对带划线(-)的属性赋值

最新推荐文章于 2024-09-26 17:46:07 发布

一栩

最新推荐文章于 2024-09-26 17:46:07 发布

阅读量6.5k

点赞数 3

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

Vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

有时在项目中需要给动态绑定style中的一些带划线（ - ）的属性进行赋值，这时因为字符的原因会出现编译错误

错误示范：

<view class="statusBar" :style="{margin-top: statusBarHeight}"></view>

正确示范：

<view class="statusBar" :style="{marginTop: statusBarHeight}"></view>

statusBarHeight为Vue实例中data的变量

转载于vue 用 :style动态修改带中划线的样式属性 - Ada_Blog - 博客园

感谢Ada_Blog

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一栩

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue v-bind:style详解

weixin_41970780的博客

01-18

2119

vue v-bind:style详解 <div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">娃哈哈，娃哈哈</div> </div> <script> new Vue({ el: '#app', data: { baseStyles: { color: 'green', fontSize: '30px' }, ove

VUE-004-动态给style赋值

weixin_39568072的博客

12-21

2490

<el-button :style="{width: buttonWidth}"></el-button> 比如：当判断当前界面是英文模式下，width是90px，中文模式下，width是80px； <script> computed: { buttonWidth: function() { return getLang() == 'zh_CN' ? 80 + 'px' : 90 + 'px'; } .

参与评论您还未登录，请先登录后发表或查看评论

Vue中的class和style绑定

09-26

1084

能够显著提高代码的可维护性和可读性。它们支持多种绑定方式，包括简单的字符串拼接、对象字面量绑定、数组绑定以及计算属性等，这使得它们非常适合用来处理动态的样式需求。在构建动态Web应用程序的过程中，Vue.js 提供了多种方式来绑定元素的 class 和 style，使开发者可以更加灵活地控制页面样式的变化。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。虽然上面的例子展示了最基础的绑定方式，但在实际开发中，我们常常需要根据条件动态改变元素的样式。

vue中动态修改样式带横线的样式名如何写

Khun_HWJ的博客

02-01

784

vue 如何动态修改css样式（将data的值动态赋值，动态修改css样式）

SLife4599的博客

05-07

4267

废话不多说直接看代码 height 为动态传入的值（通过data获取）例子1：当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view> 例子2 当我们动态修改的值为负数的时候 <view :style="[{ 'margin-top':'-'+ height + 'px'}]"> 将盒子向上移动 </view> 例子3 当我们同时传多个值

vue动态给样式赋值v-bind:class=‘‘

bamboolm的博客

01-20

1539

vue动态给样式赋值v-bind:class=''

v-bind动态绑定style问题

qq_43440751的博客

03-16

1021

VUE Day2 v-bind动态绑定v-bind动态绑定style[对象语法] v-bind动态绑定style[对象语法] 1.v-bind动态绑定style的标准语法是这样的 <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> 根据这个语法我尝试的敲了第一个代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=

vue的v-bind的使用

lucky_ly的博客

09-28

410

绑定属性值 v-bind能将属性值和变量进行动态的绑定。语法使用v-bind:属性名，或者:属性名。当变量改变时，对应的属性也会改变，但是这个绑定是单向的，即改变变量会改变对应的属性值，如果直接改变html元素的属性值，变量的值不会变，如果要实现双向绑定的话，在可以使用v-model，或者自己监听事件。 <div id="app"> <p> the message'...

Vue.js样式动态绑定实现小结

10-17

接下来，具体讲解Vue.js中动态绑定class的几种方式： 1. 三目运算符方式：使用JavaScript的三目运算符来根据条件动态切换class。如果某个条件为真，就应用第一个class；如果条件为假，则应用第二个class。 2. 基本...

vue中通过v-bind绑定style属性

weixin_44748596的博客

10-04

743

1，直接在元素标签上通过:style形式书写样式对象 <h1 :style="{color:'red','font-weight':'200'}">这是一个h1标签</h1> 2，将样式对象定义到data中，并直接引用到:style中 <h1 :style="styleobj1">这是一个h1标签</h1> var vm=new Vue({ ...

Vue 学习02——常用模版语法菜鸟教程【v-if / v-show / v-bind / v-for】

Sicily_winner的博客

04-15

1190

㋀㏩ ✎ 前言 ◆v-for 绑定事件指令 ①数组循环 ❶item in items ▶全写demo（不含index） ❷(item, index) in items ▶全写demo（含index） ② 对象循环 ③ 组件循环前言：<componentA v-for="(value...

vue基础-动态style

佐杰的博客

07-30

5348

给标签动态设置style值。

vue动态添加style样式

Lucky铂爵

05-28

1502

1.凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize 2.除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff 【对象】 html :style="{ color: activeColor, fontSize: fontSize + ‘px’ }" html :style="{color:(index==0?conFontColor:’#000’)}" 【数组】 html

vue样式绑定

sxy705242410的博客

12-25

235

VUE样式绑定1. v-bind:class设置一个对象，动态切换class2. :class可以和class共存3. :class可以绑定数据中的对象4. 三元表达式5.v-bind:class设置一个数组6.数组语法中使用对象语法7.定义一个数组通过不同索引值获取不同样式8. 绑定内联样式 1. v-bind:class设置一个对象，动态切换class <div :class="{'active':isActive}">xxx</div> //样式是否起作用，根据isActiv

vue.js的:style中属性带有连接符“-”需要加引号显示

;

01-31

884

vue.js的:style中属性带有连接符“-”需要加引号显示

CSS样式表中下划线的添加和删除

CyberFlare的博客

09-30

244

根据需要，你可以在相应的文本元素上应用相应的样式规则，实现所需的下划线效果。在上述代码中，我们定义了一个类名为"no-underline"的样式规则，并将text-decoration属性的值设置为"none"，表示没有下划线。在上述代码中，我们定义了一个类名为"underline"的样式规则，并设置了text-decoration属性的值为"underline"。需要注意的是，以上示例中使用了类选择器来应用样式规则，你也可以使用标签选择器、ID选择器或其他选择器来选择不同的文本元素并添加或删除下划线。

Vue学习笔记：v-bind动态绑定style

sweetYinger的博客

01-27

464

Vue学习笔记：v-bind动态绑定style一、对象语法二、数组语法 ■可以利用v-bind：style来绑定一些CSS内联样式 ■在写CSS属性名的时候，比如font-size — □可以使用驼峰式：fontSize — □或短横线分隔：‘font-size’ ■绑定style的两种方式：对象语法，数组语法一、对象语法 ■style后面跟的是一个对象类型 —→对象的key是CSS的属性 —→对象的value是具体赋的值，值可以来自data中的属性 <div id="app"> <

vue 动态拼接style_vue: 动态添加样式

weixin_39689700的博客

12-20

2156

vue如何操作html模版，使页面样式发生改变vue可以是使用两种方法使页面发生改变1. 动态改变class 使class增加、删除达到页面的改变2. 动态的操作style内联样式------------------------ 动态class-----------------------------显示或者隐藏需求1. 点击图片使isCircle取反需要2. 如果isCircle使false，就...

Vue入门 - Class 与 Style 绑定

博客转至https://chengyanzhao.github.io，CSDN不再更新。

04-06

1200

1 绑定class1.1 对象语法<div class="static" :class="{ active: isActive }"></div> 可将对象绑定在class属性上，动态切换class 若isActive为true，则class插入active 若isActive为false，则class移除active v-bind:class与普通class可共存。可绑定data中的对象，或计

条件渲染h和v-bind绑定

chaocainiao的博客

01-13

584

条件渲染h和v-bind绑定 <div id="app"> <div v-if="ishow"> 显示 </div> <div v-else> 隐藏 </div> <h2 v-show="show">小黑</h2> <a v-bind:href='res.url' v-bin