vue.js 实现点击div标签时改变样式

更新时间：2022年08月15日 09:34:05 作者：吴小花的博客

这篇文章主要介绍了vue.js 实现点击div标签时改变样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

1.点击某一项后样式发生改变(循环列表的每一项的样式改变)

效果图

v-for循环展示productType中的数据

：class动态绑定样式表中.changeStyle的样式，将当前索引传递给changeSelectStyle

@click点击事件触发函数changeStyle(),并将当前索引传递进去。

<ul v-for="(item,index) in productType" :key="index">
   <li  class="type-name" :class="{changeStyle:changeSelectStyle == index}" 
                         @click="changeStyle(index)" >{{item.name}}</li>
</ul>

 data(){
    return{
      changeSelectStyle:'',
      productType:[
        {"name":"APE1"},
        {"name":"APE2"},
        {"name":"APE3"},
        {"name":"APE4"},
      ]
  }
}

样式表：

.type-name
    height 38px
    text-align center
    line-height 38px 
.changeStyle
    color #0099cc
    background-color #fff

changeStyle方法：

让changeSelectStyle的值为当前索引的值

    changeStyle:function(index){
      this.changeSelectStyle = index;
    },

2.切换样式应该是v-bind很常用的功能(单标签样式的改变)

 <div class="selectAll" :class="{selectAll: !isshow,changeSelectAll: isshow}" @click="isshow=!isshow">
          <div class="text-header">全部</div>
          <div class="sel-icon"></div>
</div>

 data(){
    return{
      isshow: true
}

点击后改变文字颜色和图标

.selectAll 
    flex 0 0 37px 
    display flex   
  .text-header
    padding-left 23px 
    flex 0 0 240px 
    border-left 1px solid #0099cc
    border-bottom 1px solid #f7f7f7
    letter-spacing 2px
    line-height 37px 
  .sel-icon
    flex 1
    bg-image('../images/select-icon2')
    background-repeat no-repeat 
    background-size 16px 16px
    width 16px 
    height 16px 
    align-self center
.changeSelectAll
    color #0099cc 
   .sel-icon
    bg-image('../images/select-icon1')

原图及点击后效果

3.实现联动（完整代码）

效果如下：

默认状态，循环列表的每一项都没有被选中。选中后其中某一项全部取消，选中全部，其他项取消选中。

html部分

<template>
 <div class="fliter-container">
   <div class="top">
     <span class="back-icon" @click="back()"/>
     <p class="title">产品筛选</p>
   </div>
   <div class="content">
      <div class="left">
        <ul v-for="(item,index) in productType" :key="index">
          <li  class="type-name" :class="{changeStyle:changeSelectStyle == index}" @click="changeStyle(index)" >{{item.name}}</li>
        </ul>
      </div>
      <div class="right">
        <div class="selectAll" :class="{selectAll: !isshow,changeSelectAll: isshow}" @click="isshow=!isshow">
          <div class="text-header">全部</div>
          <div class="sel-icon"></div>
        </div>
        <div class="select-detail" >
            <div class="selectItem" v-for="(item,index) in nameoptions" :key="index" :class="{changeSelectItem:changeSelectIndex == index&&!isshow}" @click="changeItem(index)" > 
              <div class="text">{{item.name}}</div>
              <div class="sel-icon"></div>
            </div>       
        </div>
        <div class="bottom">
          <button class="confirm" >确定</button>
        </div>
      </div>
   </div>
   
 </div>
  
</template>

<script>
export default {
  data(){
    return{
      isshow: true,
      changeSelectStyle:'',
      changeSelectIndex:'',
      productType:[
        {"name":"APE1"},
        {"name":"APE2"},
        {"name":"APE3"},
        {"name":"APE4"},
      ],
      nameoptions:[
        {"name":"HiLight照明灯车全系列1"},   
        {"name":"HiLight照明灯车全系列2"},
        {"name":"HiLight照明灯车全系列3"},
        {"name":"HiLight照明灯车全系列4"},
        {"name":"HiLight照明灯车全系列5"},
        {"name":"HiLight照明灯车全系列6"},
        {"name":"HiLight照明灯车全系列7"},
        {"name":"HiLight照明灯车全系列1"},
        {"name":"HiLight照明灯车全系列1"},
        {"name":"HiLight照明灯车全系列1"},
        {"name":"HiLight照明灯车全系列1"},
        {"name":"HiLight照明灯车全系列1"},   
        {"name":"HiLight照明灯车全系列2"},
        {"name":"HiLight照明灯车全系列3"},
        {"name":"HiLight照明灯车全系列4"},
        {"name":"HiLight照明灯车全系列5"},
        {"name":"HiLight照明灯车全系列6"},
        {"name":"HiLight照明灯车全系列7"},
        {"name":"HiLight照明灯车全系列1"},
        {"name":"HiLight照明灯车全系列1"},
        {"name":"HiLight照明灯车全系列1"},
        {"name":"HiLight照明灯车全系列1"},             
        ]
    }
  },
  methods:{
    // 改变分类名的样式
    changeStyle:function(index){
      this.changeSelectStyle = index;
    },
    // 改变分类详情样式
    changeItem(index){
      this.isshowItem != this.isshowItem;
      this.isshow = false
      this.changeSelectIndex = index;
    },
    back(){
      this.$router.push({name:"product"})
    }
  }
  
}
</script>

 
<style lang="stylus" scoped>
@import '~common/stylus/mixin'
@import '~common/stylus/variable'
  .fliter-container
     width 100%
     height 100%
     display flex
     flex-direction column
     .top 
       flex 0 0 40px
       display flex
       background-color #0099cc
       color #fff
       .back-icon
         bg-image('../images/back-icon')
         background-size 19px 15px 
         background-repeat no-repeat
         flex 0 0 19px 
         margin 13px 0 0 15px
       .title
         flex 1
         align-self center
         margin-left 120px
         letter-spacing 3px
     .content 
       flex 1
       display flex
       .left 
         font-size 13px
         flex 0 0 78px
         letter-spacing 1px 
         background-color #f7f7f7
         .type-name
           height 38px
           text-align center
           line-height 38px 
         .changeStyle
           color #0099cc
           background-color #fff
       .right 
         flex 1
         overflow hidden
         font-size 13px
         display flex
         flex-direction column     
         .selectAll 
           flex 0 0 37px 
           display flex   
           .text-header
             padding-left 23px 
             flex 0 0 240px 
             border-left 1px solid #0099cc
             border-bottom 1px solid #f7f7f7
             letter-spacing 2px
             line-height 37px 
           .sel-icon
             flex 1
             bg-image('../images/select-icon2')
             background-repeat no-repeat 
             background-size 16px 16px
             width 16px 
             height 16px 
             align-self center
          .changeSelectAll
            color #0099cc 
            .sel-icon
              bg-image('../images/select-icon1')
         .select-detail
           flex 1
           overflow auto
           .selectItem
             height 37px
             display flex
             .text
              flex 0 0 240px 
              margin-left 23px 
              letter-spacing 1px
              line-height 37px 
              border-bottom 1px solid #f7f7f7
             .sel-icon
              flex 1
              bg-image('../images/select-icon2')
              background-repeat no-repeat 
              background-size 16px 16px
              width 16px 
              height 16px 
              align-self center
           .changeSelectItem
             color #0099cc
             .sel-icon
              bg-image('../images/select-icon1')
         .bottom
            flex 0 0 50px 
            width 100%
            display flex
            .confirm 
              background-color #0099cc
              width 124px    
              height 26px 
              color #fff
              letter-spacing 2px
              align-self center
              margin-left 20%
              border none
</style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中如何获取当前路由name
这篇文章主要介绍了vue中如何获取当前路由name，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue中改变选中当前项的显示隐藏或者状态的实现方法
下面小编就为大家分享一篇vue中改变选中当前项的显示隐藏或者状态的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Element el-row el-col 布局组件详解
这篇文章主要介绍了Element el-row el-col 布局组件使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
如何查看vue-cli版本的两个命令
这篇文章主要介绍了如何查看vue-cli版本的两个命令问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
vue使用html2canvas实现将DOM节点生成对应的PDF
这篇文章主要为大家详细介绍了vue如何使用html2canvas实现将DOM节点生成对应的PDF,文中的示例代码简洁易懂,感兴趣的小伙伴可以学习一下
2023-08-08
Vue 使用 ElementUi el-upload 手动上传文件限制上传文件类型大小同名等进行限制
个人在做文件上传功能的时候,踩过不少的坑,特在此记录下,本文介绍Vue使用 ElementUi el-upload 手动上传文件限制上传文件类型大小同名等进行限制问题,感兴趣的朋友一起看看吧
2024-02-02
vue+tsc+noEmit导致打包报TS类型错误问题及解决方法
当我们新建vue3项目,package.json文件会自动给我添加一些配置选项,这写选项基本没有问题,但是在实际操作过程中,当项目越来越复杂就会出现问题,本文给大家分享vue+tsc+noEmit导致打包报TS类型错误问题及解决方法,感兴趣的朋友一起看看吧
2023-10-10
vue.js国际化 vue-i18n插件的使用详解
本篇文章主要介绍了vue.js国际化 vue-i18n插件的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
Vue3中如何自定义双向绑定
这篇文章主要介绍了Vue3中如何自定义双向绑定问题,具有很好的参考价价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
使用Vue开发自己的Chrome扩展程序过程详解
这篇文章主要介绍了使用Vue开发自己的Chrome扩展程序过程详解，浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。,需要的朋友可以参考下
2019-06-06