[log] vue动态的修改样式

太过爱你忘了你带给我的痛 2021-09-16 20:18 424阅读 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 条评论，424人围观）

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

相关阅读

相关 Vue 动态样式绑定

1. 简介本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完

迈不过友情╰/ 2024年03月27日 08:47/ 0 赞/ 53 阅读

相关 vue 动态样式写法

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

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

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

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

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

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

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

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

相关动态修改elmentUI元素样式

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

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

相关 vue动态修改meta的title

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

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

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

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

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

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

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

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

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

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

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

相关 Vue动态改变样式实战

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

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