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

最新推荐文章于 2024-10-11 16:05:49 发布

娄渊洋

最新推荐文章于 2024-10-11 16:05:49 发布

阅读量4.2k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/SLife4599/article/details/116487940

版权

废话不多说直接看代码

height 为动态传入的值（通过data获取）

例子1：

当我们动态修改的值为正数的时候

 <view :style="[{ 'margin-top':height + 'px'}]">
 将盒子向下移动
 </view>

例子2

当我们动态修改的值为负数的时候

 <view :style="[{ 'margin-top':'-'+ height + 'px'}]">
  将盒子向上移动
 </view>

例子3

当我们同时传多个值的时候,中间用，号分开

 <view :style="[{ 'margin-top':'-'+ height + 'px', 'font-size': '36upx','color': '#ffffff',}]">
  将盒子向上移动
 </view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

娄渊洋

关注关注

0
点赞
踩
6

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

vue实现列表点击动态改变样式

qq_43858258的博客

07-14

1375

vue实现列表点击动态改变样式一、实现原理 v-for进行列表循环 v-bind动态绑定二、实现 1.v-for循环列表 data(){ return{ currentIndex:0, } } <ul> <li class="showplace-left-content" v-for="(item, index) in leftList" :key="index" >

怎么用vue给css中的变量赋值

m0_68094390的博客

05-20

1506

您需要使用CSS的自定义属性。您可以使用Vue组件的style部分将自定义属性定义为CSS变量，然后在该组件中使用该属性。的值发生改变时，背景颜色也会相应地发生改变。绑定了一个对象，对象中定义了一个名为。的自定义属性，并将它的值设为变量。在CSS样式中，我们使用。来引用该自定义属性。

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

【 vue/css列表无限滚动轮播，可接受动态赋值】

weixin_43824116的博客

11-26

1110

vue/css列表无限滚动轮播，可接受动态赋值 1.先上效果图 2.先上效果图

vue实战指南 vue中通过ref更改css

10-11

679

确实是一个强有力的工具。为了保持代码的整洁和可维护性，建议将所有与DOM相关的逻辑封装在一个单独的方法中，并尽量减少直接操作DOM的次数。此外，利用Vue的计算属性和侦听器也可以达到类似的效果，同时还能更好地遵循Vue的数据驱动原则。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在Vue.js的应用开发中，我们经常会遇到需要动态修改DOM元素样式的情况。此示例中，我们监听了窗口大小的变化，并根据不同的屏幕宽度设置了不同的高度值。

CSS属性动态赋值

yangzheui的博客

03-17

1187

css

vue动态css

loading-world

07-31

1771

用Vue动态给Style赋值，格式： <view :style='{样式名：‘+动态变量+’}' 其中在css 样式里有“-”的需要换成驼峰模式下面记录几个常用的样式： 1.动态给背景图片赋值 <view :style="{backgroundImage:'url('+item.image+')'}"> 应用时把item.image 替换成对应的变量 Loading… ...

Vue中CSS动态样式绑定与注意事项

警警的博客

05-13

1019

Vue中CSS动态样式绑定与注意事项

在vue中动态修改css其中一个属性值操作

01-18

我就废话不多说了，大家还是直接看代码吧~  <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /

vue 实现根据data中的属性值来设置不同的样式

11-19

在Vue.js中，动态地根据data中的属性值来设置元素的样式是常见的需求。这有助于实现界面的灵活性和响应性。下面将详细讲解如何利用Vue的特性实现这一功能，特别是结合三元运算符进行条件判断绑定内联样式。首先，...

Vue.js 动态为img的src赋值方法

11-28

在Vue.js中，动态地为`<img>`标签的`src`属性赋值是一个常见的需求，尤其是在处理异步数据或者根据条件展示不同图片时。在给出的场景中，我们需要根据`data.List`中的`sex`字段（性别）来决定图片的路径。下面将详细...

利用vue修改绑定修改css的样式

05-30

可以通过Vue的绑定语法来修改CSS样式。具体步骤如下： 1. 在Vue组件的模板中使用绑定语法，将需要修改样式的元素绑定到一个变量上。例如： ``` <div :class="myClass">Hello World! ``` 上述代码中，使用了`:...

vue中css样式根据data的数据来

qq_38985463的博客

06-11

1479

setUI(){ if(document.getElementsByClassName('el-select-dropdown__item').length){ let ele=document.getElementsByClassName('el-select-dropdown__item')[0].style ele.setProperty('--font',this.scale*14+'px') ele.setProperty('--height'..

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通过data值改变css样式

李苗苗的博客

08-18

4541

一，绑定class 1. . centerActive为class样式名，满足后面的条件时则class为centerActive 2. frame-item-active 和frame-item为class名，满足条件为frame-item-active ，不满足则为frame-item 3. active-btn 和 all-btn为class名，满足条件时class为...

vue前端给css样式类绑定动态值，包含css动画实现扇形倒计时效果

weixin_43996368的博客

08-31

1680

vue前端给css样式类绑定动态值

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

h971670808的博客

06-02

6554

有时在项目中需要给动态绑定style中的一些带划线（ - ）的属性进行赋值，这时因为字符的原因会出现编译错误错误示范： <view class="statusBar" :style="{margin-top: statusBarHeight}"></view> 正确示范： <view class="statusBar" :style="{marginTo...

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

bamboolm的博客

01-20

1540

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

前端-VUE2中的动态CSS样式

qq_42371932的博客

11-30

2500

<button :style="buttonStyle">点击</button> computed: { buttonStyle() { return { backgroundColor: this.clicked ? 'green' : 'blue', color: 'white', padding: '10px 20px' }; } }<div :style="{ backgroundColor: bgColor

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