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

最新推荐文章于 2024-08-19 08:00:00 发布

娄渊洋

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量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动态切换css文件_在vue中动态修改css其中一个属性值操作

weixin_39581739的博客

12-20

2919

我就废话不多说了，大家还是直接看代码吧~{{ msg }}export default {data() {return {msg: "Welcome to Your Vue.js App",};},computed: {getClientHeight:function () {//屏幕可视区域的高度let clientHeight = document.documentElem...

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

m0_68094390的博客

05-20

1459

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

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

Vue3 动态修改CSS样式（包含style + class）- 附示例

最新发布

m0_48968874的博客

08-19

4042

在日常的开发过程中，CSS样式根据某个变量的状态或者是变量值的改变而展示不同的属性值是很常见的，故在此记录一些常用的使用场景。

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

weixin_43824116的博客

11-26

1087

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

CSS属性动态赋值

yangzheui的博客

03-17

1150

css

vue动态css

loading-world

07-31

1763

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

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

qq_38985463的博客

06-11

1455

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中动态修改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实现列表点击动态改变样式

qq_43858258的博客

07-14

1350

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的样式

05-30

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

VUE-004-动态给style赋值

weixin_39568072的博客

12-21

2451

<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

4524

一，绑定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

1659

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

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

h971670808的博客

06-02

6533

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

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

bamboolm的博客

01-20

1522

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

前端-VUE2中的动态CSS样式

qq_42371932的博客

11-30

2331

<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

226

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