vue+elementUI实现点击按钮互斥效果

本文实例为大家分享了vue+elementUI实现点击按钮互斥的具体代码，供大家参考，具体内容如下

先看看实现的效果吧！

步骤：

一.html代码

<!-- 等级筛选 -->
    <div class="level-screening">
      <el-button
        size="medium"
        type="primary"
        :class="index==itemType?'highlight':''"
        v-for="(item,index) in levelList"
        :key="index"
        @click.prevent="materTay(index,item.code)"
      >
        {{ item.codeValue }}</el-button
      >
</div>

二.css(less)代码

.level-screening {
      padding-left: 40px;
      box-sizing: border-box;
      height: 120px;
      text-align: left;
      line-height: 80px;
      .el-button {
        border-color: #0085f4;
        background-color: #fff;
        color: #0085f4;
      }
      .highlight {
        background-color: #8e66f6 !important;
        color: #fff;
      }
    }

三.js代码

export default {
 data() {
    return {
       levelList: [
        {
          code: '',
          codeValue: '全部'
        },
        {
          code: '',
          codeValue: '铜'
        },
        {
          code: '',
          codeValue: '银'
        },
        {
          code: '',
          codeValue: '金'
        },
        {
          code: '',
          codeValue: '白金'
        },
        {
          code: '',
          codeValue: '铂金'
        }
      ], // 等级筛选数据
      itemType: 0, // 等级筛选选中的标识
      materialCode: '' // 分类的code值
        }
    },
   methods: {
    // 等级筛选互斥效果
    materTay(itemType, code) {
      // 等级筛选选中的标识-高亮效果
      this.itemType = itemType
      // 分类的code值
      this.materialCode = code
    }
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 表单之通过v-model绑定单选按钮radio

    vue 表单之通过v-model绑定单选按钮radio

    用v-model绑定单选框能带来很多便捷的开发体验. 基础用法 <template> <div id="app"> <input type="radio" id="male" value="Male" v-model="gender"> Male <input type="radio" id="female" value=&q

  • 详解VUE前端按钮权限控制

    在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的storage进行存储,之后,定义指令,如果用户含有此按钮权限,则在页面显示出来: /**权限指令**/ Vue.directive('has', { bind: function(el, binding) { if (!Vue.prototype.$_has(binding.value)) { el.parentNode.removeChild(el); } } }); //权限检查方法 Vue.prototype.$_has = f

  • Vue.js实现按钮的动态绑定效果及实现代码

    Vue.js实现按钮的动态绑定效果及实现代码

    实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte

  • Vue.js点击切换按钮改变内容的实例讲解

    代码实例: 代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位.同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bo

  • Vue实现按钮级权限方案

    演示 在年初开发一个中后台管理系统,功能涉及到了各个部门(产品.客服.市场等等),在开始的版本中,我和后端配合使用了花裤衩手摸手系列的权限方案,前期非常nice,但是慢慢的随着功能增多.业务越来越复杂,就变得有些吃力了,因为我们的权限动态性太大了 手摸手系列权限方案是有比较清晰的权限划分的,而我们公司部门的岗位职责有时比较模糊. 后端采用RBAC权限方案,为了达到第1点要求,将角色划分的很细,并且角色有时频繁变动,导致每一次前端都需要手动维护 为了解决上面2个痛点,我将原方案进行了一丢丢改造.

  • vue实现动态按钮功能

    Vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮 具体效果图如下: 点击后会变成这样: 首先我们需要下载vue.js: https://vuejs.org/js/vue.min.js 将网页内的内容全选粘贴至js文件中 然后我们先创建一个html文件 在body创建一个按钮具体代码如下: <body> <div id="app"> <button v-on:click="bt

  • 解决vue 按钮多次点击重复提交数据问题

    这个其实是一个很细节的问题. 如果我们操作一个按钮,然后在按钮点击的时候绑定事件. 事件分为两种情况: •第一种: 不操作数据型 •第二种: 操作数据型 <template> <button @click="submit()" :disabled="isDisable">点击</button> </template> <script> export default { name: 'TestButton',

  • vue点击按钮动态创建与删除组件功能

    vue点击按钮动态创建与删除组件功能

    主要功能需求点: 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示 点击右侧创建的组件中的删除按钮,删除对应的组件 删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> <div class="addZujian"> <div>

  • 使用Vue中 v-for循环列表控制按钮隐藏显示功能

    v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. - 实现效果如图 需求描述: 第一个显示蓝色按钮,代表数据最终状态:其余按钮为灰色,显示数据流转记录. 返回的数据类型 前端页面代码 <div class="leftProcessBox"> <div class="leftProcess" v-for="(l

  • vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

    最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频播放效果 <video-player class="vjs-custom-skin" ref="videoPlayer1" :options="playerOptions" :playsinline="true" :even

  • vue.js 实现点击按钮动态添加li的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="

随机推荐