vue 如何动态修改css样式(将data的值动态赋值,动态修改css样式)

曾经终败给现在 2021-07-26 02:44 1873阅读 0赞

废话不多说直接看代码

height 为动态传入的值(通过data获取)

例子1:

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

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

例子2

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

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

例子3

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

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

发表评论

表情:
评论列表 (有 0 条评论,1873人围观)

还没有评论,来说两句吧...

相关阅读