[log] vue动态的修改样式

太过爱你忘了你带给我的痛 2021-09-16 20:18 452阅读 0赞

# 切换背景图片 #

<div class="carlist" :style=imgurl></div>

imgurl:{   backgroundImage: "url(" + require("../../assets/nouse.png") + ")",},

# 切换图片 #

<img :src=img1 />

img1:require("../../assets/smartimg/right1.png"),

# 动态给div加边框 #

场景:点击地址时加上边框,并设置为当前要使用的地址

<div class="c1" v-for="i in addresslist" :id=i.AddrSeq @click="checkAddress(i.AddrSeq)">
                </div>

// 选择地址
                checkAddress(id) { 
                    if (this.lastel != null) { 
                        this.lastel.style.boxShadow = null
                    }
                    var el = document.getElementById(id)
                    this.lastel = el;
                    el.style.boxShadow = ' 0 2px 12px 0 #409EFF'
                    this.currentAddress = id;
                },

# 切换class #

<div class="footerstyle" :class="{ 'test2':isChoose}" >
    
     </div>
    
    <style lang="scss" scoped> .footerstyle { position: absolute; bottom: 0px; width: 100%; height: 5%; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .test2 { background-color: #ff363d; } </style>

data() { 
          return {       
          	isChoose:false,
    	};
    }
     methods: { 
      	changeSubmit() { 
            this.isChoose = true
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，452人围观）

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

相关阅读

相关 vue 动态样式写法

在Vue中，可以使用动态样式来根据组件的数据或计算属性来动态地设置元素的样式。Vue提供了多种方式来实现动态样式的写法，以下是几种常见的方法：使用:style指令：可以

喜欢ヅ旅行/ 2024年03月24日 19:20/ 0 赞/ 88 阅读

相关 vue中动态修改组件样式

今天遇到了个难题，在次记录一下。一般我们vue中动态修改一个组件的样式会用 :class :style等方法。今天我在修改一个组件样式的时候发现覆盖不了原有样式

客官°小女子只卖身不卖艺/ 2023年02月23日 12:28/ 0 赞/ 46 阅读

相关 vue修改浏览器的滚动条样式

在vue页面加上以下css： ::-webkit-scrollbar { width: 10px; } ::-webkit-

深碍√TFBOYSˉ_/ 2022年12月03日 01:34/ 0 赞/ 276 阅读

相关 uniapp动态修改样式_Vue如何动态修改CSS变量

想要动态修改css样式就得能动态的给<style></style>赋值，可是<style></style>里面又写不了变量（有可能可以但是我不会。。），所以想了个这种办法，通过

Dear 丶/ 2022年10月13日 05:25/ 0 赞/ 2147 阅读

相关动态修改elmentUI元素样式

> 理论上也可用于其他组件库这里以修改一个input框的文字颜色为例，正常我们要修改`el-textarea__inner`的值用以下写法即可 /deep/ .e

港控/mmm°/ 2022年10月12日 01:37/ 0 赞/ 235 阅读

相关 vue动态修改meta的title

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迈不过友情╰/ 2022年09月03日 00:07/ 0 赞/ 287 阅读

相关 vue修改自带的title属性样式，title属性样式修改办法

1.定义id=‘title’ :data-title=“itemss.contactsCallTime2” 这个值 <div class="grid-content

待我称王封你为后i/ 2022年03月12日 05:11/ 0 赞/ 2211 阅读

相关 [log] vue动态的修改样式

切换背景图片 <div class="carlist" :style=imgurl></div> imgurl:{ backgroundImage:

太过爱你忘了你带给我的痛/ 2021年09月16日 20:18/ 0 赞/ 453 阅读

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

废话不多说直接看代码 height 为动态传入的值（通过data获取）例子1：当我们动态修改的值为正数的时候 <view :style="[{ 'mar

曾经终败给现在/ 2021年07月26日 02:44/ 0 赞/ 1789 阅读

相关 Vue动态改变样式实战

目录一点睛二 vue动态改变样式 1 代码 2 效果三通过 computed 改变样式 1 代码 2 效果四通过双向绑定改变样式 1 代码 2

港控/mmm°/ 2021年07月24日 21:21/ 0 赞/ 669 阅读