[log] vue动态的修改样式

最新推荐文章于 2024-07-11 10:51:30 发布

go_sparrow

最新推荐文章于 2024-07-11 10:51:30 发布

阅读量711

点赞数

本文链接：https://blog.csdn.net/java_sparrow/article/details/83624495

版权

log 专栏收录该内容

55 篇文章

订阅专栏

本文介绍如何在前端开发中实现背景图片、图片、div边框及class的动态切换，包括使用Vue.js的数据绑定和事件处理来改变元素样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

切换背景图片

<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
    },