美文网首页
切换样式

切换样式

作者: 一枚小菜 | 来源:发表于2020-03-28 15:44 被阅读0次

用vue写公众号时的小技巧:
我们遍历数组的时候想要点击的时候切换样式,可以用:class来做,:class="['a',{'b':index==num}]",set方法传index过去,然后赋值给num,如果index==num时,使用b样式,否则使用a样式

   <div class="head">
      <div :class="['head_t',{'head_tt':index==num}]" v-for="(item,index) in list"
           :key="index" @click="set(index)">{{item.name}}
      </div>
    </div>
  data() {
      return {
        num: 0,
        list: [
          {name: '全部'},
          {name: '待付款'},
          {name: '待收货'},
          {name: '待安装'},
          {name: '待评价'},
        ],
}
   methods: {
      set(index) {
        console.log(index)
        this.num = index
      }
    }

相关文章

  • JavaScript---操作dom样式

    添加样式 通过类 add函数 添加样式 移除样式 通过类 remove函数 移除样式 切换样式 通过切换类 to...

  • jQuery中的样式操作

    操作样式 addClass()添加样式 removeClass()移除样式 toggleClass()切换样式 h...

  • 【css】单位转换

    px转rem 切换元素样式 使用类似Jq的方法toggleClass进行切换类别样式 判断各种数据类型

  • tab页签切换组件

    2019年12月27日 一.样式1 1.通用固定tab切换样式 2.顶部切换效果实现 二.样式1 1.效果: 2....

  • 使用公式简单快速切换颜色

    ·点击字体,样式切换,简单写法 显示:

  • jQuery 属性、样式操作

    1、属性操作 获取属性 设置属性 删除属性 2、样式操作 获取属性 设置属性 追加样式 移除样式 切换样式

  • 绑定样式(动态切换样式)

    使用v-bind绑定class,实现动态的样式切换

  • 界面换肤笔记

    界面换肤的两种实现方式 1.主题切换模式 创建两种主题模式 自定义属性 应用样式,通过?attr/去引用样式 切换...

  • 2-2设置和移除类样式

    判断元素是否含有某类样式hasClass('类样式名称'); //返回一个布尔值 切换类样式使用toggleCl...

  • qiankun实战

    css隔离方案 子应用之间样式隔离Dynamic Stylesheet 动态样式表,当应用切换时移除老应用样式,添...

网友评论

      本文标题:切换样式

      本文链接:https://www.haomeiwen.com/subject/urpyuhtx.html