Vue中自定义属性及动态添加删除class style样式

阿布阿朵

已于 2022-11-22 16:38:42 修改

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-11-22 15:56:38 首次发布

本文链接：https://blog.csdn.net/weixin_46240807/article/details/127984348

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

class	:class="{ c1BackgroundColor: c1mouces == index }"
style	:style="{ display: c1mouces == index ? 'block' : 'none' }"

案例源于购物平台三级导航的使用

一、由于对每个导航添加点击事件，对性能优化有冲突，将三级导航的点击跳转事件委派给父组件，父组件点击跳转传参出现两个问题：

①：如何知道点击的是跳转标签

②：如何传参

二、问题解决

1、解决问题的办法：

给每个跳转标签添加自定义属性并传参

<a :data-cateName="c3.categoryName" :data-categoryC3Id="c3.categoryId">{{c3.categoryName}}</a>

2、在父元素的点击事件中获取自定义属性及其值

      goSearchClick(event){
        let _this =this
        let element =event.target
        let {catename,categoryc1id,categoryc2id,categoryc3id} = element.dataset;
        let location ={name :'search'}
        let query ={cateName:catename}
        if(catename){
            if(categoryc1id){
                query.categoryId=categoryc1id
            }else if(categoryc2id){
                query.categoryId=categoryc2id
            }else {
                query.categoryId=categoryc3id
            }
        }
        location.query =query
        this.$router.push(location)
      }