vue的自定义指令

vue自带的v-for和v-if指令经常用也很好用，但是vue也可以自定义一些好用的指令；一下也想不到什么简单的例子就随便写一点：

写一个点击切换样式的：

 

 基本就是这样根据你点击时获取对应的index，再赋值给中间变量curIdx，然后再动态改变class来实现样式转换，这是常见的写法，那我用自定义指令来写一下这个：

首先我使用自定义指令肯定要先引入，再注册，再使用 ，如下：

（这个指令引入路径错了 不想截图了 懒）

 这时候保存会报错，因为我这边还没写这个changeStyle,其实自定义指令就时一个函数，去写一下并暴露出来我那个指令使用的时候需要传一些参数，待会再说先写着；

 指令接收三个参数：curIdx,默认class名称，选中class名称，

 这个时候就要开始写指令里面的了：首先看下官方文档

这里面的钩子函数要用到两个bind和update

 这是这些钩子函数里面的参数，主要用到的就时el和binding，至于这参数是什么我们可以自己打印一下看看

这是el打印出来的

 

这是binding打印出来的 当我点击时 binging打印出来的多了一个参数oldValue就是改变之前的参数

 

现在这些东西都有了 那就好操作了

 就是这样，红圈标记的地方一定要记得空格 添加一个class属性中间要有空格隔开

我这边bind里面的操作是获取到选中的idx对应的class 然后给他增加一个class是选中的样式，使用了模板字符串，这个样就可以再页面更新时有个默认选中的样式，

update里面的操做是给在点击之后首先将上一个选中的样式还原，再给新选中的class添加样式，基本就完成了这个自定义指令，下班

忘记说了 这个前面的是把动态改变class的删除了 

附上代码

<div class="grid" v-change-style='{
                curIdx,
                className:"noCur",
                curName:"curSty",
    }'>
      <div
        class="noCur"
        @click="chooseIndex(index)"
        v-for="(item, index) in itemData"
        :key="index"
      >
        {{ item }}
      </div>
    </div>



//js
export default {
    bind(el,binding){
        const value=binding.value,
              _c=el.getElementsByClassName(value.className);
        console.log(_c,'_c');
        _c[value.curIdx].className+=` ${value.curName}`
    },
    update(el,binding){
        console.log(binding,'binding');
        const value=binding.value,
              _old=binding.oldValue,
              _c=el.getElementsByClassName(value.className);
              _c[_old.curIdx].className=`${_old.className}`
              _c[value.curIdx].className+=` ${value.curName}`
    }
}