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

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