您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 403人已围观

简介 vue.js 实现点击div标签时改变样式_vue.js_

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

效果图

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

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

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

{{item.name}}

 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很常用的功能(单标签样式的改变)

全部

 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')

原图及点击后效果