zoukankan      html  css  js  c++  java
  • 动态添加类名

    给每个li添加test3类名:

        <ul ref="ulRef">
          <li class="test1 test2">项目一</li>
          <li class="test1 test2">项目二</li>
          <li class="test1 test2">项目三</li>
        </ul>

    1、utils/utils.js中声明addClass函数

    export const addClass = (el, className) => {
      if (_hasClass(el, className)) return
      let newClass = el.className.split(' ')
      newClass.push(className)
      el.className = newClass.join(' ')
    }
    
    // 判断当前元素中是否有该类名
    const _hasClass = (el, className) => {
      const reg = new RegExp('(^|\s)' + className + '(\s|$)')
      return reg.test(el.className)
    }

    2、引入并使用:

    import { addClass } from '@utils/utils'
      mounted() {
        this._addClass()
      },
      methods: {
        _addClass() {
          let list = this.$refs.ulRef.children
          list.forEach((item) => {
            addClass(item, 'test3')
          })
        }
      }

    效果:

  • 相关阅读:
    MySQL事务隔离级别和MVCC
    windows环境下查看端口是否被占用
    jar找不到问题解决
    Java注解
    Fastjson
    mybatis
    Idea快捷键
    Date与String的相互转换
    Windows快捷键
    [转]linux awk命令详解
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14864937.html
Copyright © 2011-2022 走看看