精华内容
下载资源
问答
  • vue点击高亮
    2019-09-28 07:00:56

    首先在data定义一个数组,数组里面的结构是对象,在对象里面写一个键值对,对应上你需要的文字,然后定义一个 active:'' 。在html结构中用  v-for  循环遍历出来,然后加个class  例如    :class="{live_btn:true,active:active === item.name}   ,再定义一个方法, 例如   @click="conversion(item.name)"  把item 里面的名字当做实参传进这个方法里面,这些都写在同一个结构里面,例如  我是写在  button  标签里面的。

    昨晚这些还有最重要的一步就是,在  methods  里面写方法,把  active  等于点击的时候传过来的参数,这样条件成立,就可以高亮了。   this.active = name;   

    转载于:https://www.cnblogs.com/Hajar/p/11327752.html

    更多相关内容
  • vue-点击高亮

    2021-10-25 21:28:18
    做法:用一个动态类名,定义一个变量保存当前应该高亮的标记(下标,字母,数字都可), 点击那个就把那个的标记(值)传给变量,变量与标记相等就是true 此时这个动态类名就可用了

    做法:用一个动态类名,定义一个变量保存当前应该高亮的标记(下标,字母,数字都可),

    点击那个就把那个的标记(值)传给变量,变量与标记相等就是true 此时这个动态类名就可用了

    展开全文
  • 今天小编就为大家分享一篇Vue点击切换颜色的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue实现点击当前标签高亮效果的思路详解,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • vue点击当前元素显示高亮

    千次阅读 2021-10-21 20:41:36
    数据渲染发现全部都是高亮,我们要做的是点击当前的元素,当前元素亮,还要保持默认第一个亮 //3.所以定义一个值等于第一个索引,然后点击点击当前的索引给class <template> <div class="wrap"> ...

    //1.我们先渲染数据

    //2.数据渲染发现全部都是高亮,我们要做的是点击当前的元素,当前元素亮,还要保持默认第一个亮

    //3.所以定义一个值等于第一个索引,然后点击把点击当前的索引给class

    <template>
      <div class="wrap">
        <div class="nav_left"
             id="navLeft">
          <div class="nav_content"
               v-for="(item,index) in arr"
               :key="item.first_id"
               @click="btn(index)">
            <span :class="{active:one===index}">{{item.first_name}}</span>
          </div>
        </div>
        <div class="down">
          <i class="iconfont icon-xiajiantoubeifen gray"></i>
        </div>
      </div>
    </template>
    
    <script>
    //1.我们先渲染数据
    //2.数据渲染发现全部都是高亮,我们要做的是点击当前的元素,当前元素亮,还要保持默认第一个亮
    //3.所以定义一个值等于第一个索引,然后点击把点击当前的索引给class
    export default {
      data () {
        return {
          one: 0,
          arr: [
            {
              first_id: "0",
              first_name: "热门"
            },
            {
              first_id: "621",
              first_name: "\u5496\u5561",
            },
            {
              first_id: "627",
              first_name: "\u996e\u98df",
            },
            {
              first_id: "279",
              first_name: "\u7537\u88c5",
            },
            {
              first_id: "294",
              first_name: "\u5973\u88c5",
            },
            {
              first_id: "122",
              first_name: "\u773c\u955c",
            },
            {
              first_id: "339",
              first_name: "\u5185\u8863\u914d\u9970",
            },
            {
              first_id: "391",
              first_name: "\u6bcd\u5a74",
            },
            {
              first_id: "35",
              first_name: "\u978b\u9774",
            },
            {
              first_id: "39",
              first_name: "\u8fd0\u52a8",
            },
            {
              first_id: "153",
              first_name: "\u7bb1\u5305",
            },
            {
              first_id: "119",
              first_name: "\u7f8e\u5986\u4e2a\u62a4",
            },
            {
              first_id: "355",
              first_name: "\u5bb6\u7eba",
            },
            {
              first_id: "51",
              first_name: "\u9910\u53a8",
            },
            {
              first_id: "334",
              first_name: "\u7535\u5668",
            },
            {
              first_id: "369",
              first_name: "\u5bb6\u88c5",
            },
            {
              first_id: "10",
              first_name: "\u5bb6\u5177",
            },
            {
              first_id: "223",
              first_name: "\u6570\u7801",
            },
            {
              first_id: "429",
              first_name: "\u6c7d\u914d",
            },
            {
              first_id: "546",
              first_name: "\u5065\u5eb7\u4fdd\u5065",
            },
            {
              first_id: "433",
              first_name: "\u5b9a\u5236",
            },
          ],
        };
      },
      methods: {
        btn (index) {
          this.one = index
        }
      },
    };
    </script>
    
    <style>
    .wrap {
      width: 100%;
      display: flex;
      margin: 0.2rem 0 0 0;
      position: relative;
    }
    
    /*左侧的导航样式*/
    .nav_left {
      width: 21.1875rem;
      overflow: scroll;
    }
    
    .nav_left::-webkit-scrollbar {
      display: none;
    }
    
    .nav_content {
      white-space: nowrap;
      padding: 0 0.7rem;
    }
    
    .nav_content span {
      display: inline-block;
      padding: 0.4rem 0.6rem;
      font-size: 0.875rem;
    }
    
    .nav_content .active {
      border-bottom: 2px solid #7f4395;
      color: #7f4395;
    }
    
    .nav_left,
    .down {
      float: left;
    }
    
    /*右侧导航部分*/
    .down {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .gray {
      color: gray;
      display: inline-block;
      vertical-align: middle;
    }
    </style>
    

    展开全文
  • 下面小编就为大家分享一篇vue结合Echarts实现点击高亮效果的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue实现点击选中高亮效果

    千次阅读 2021-11-09 09:50:08
    vue最简单的实现点击选中方式,话不多说,附上代码和效果图 <div class="listCss" v-for="(item,index) in listArr" :key="index" @click="activeVar=index" :class="{'activeCss':activeVar==index}">{{...

    vue最简单的实现点击选中方式,话不多说,先看效果图,顺带附上代码

     

    <template>
     <div>
       <div class="listCss" v-for="(item,index) in listArr" :key="index" 
       :class="{'activeCss':activeVar==index}" @click="activeFun(item,index)">
          {{item}}
       </div>
     </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
        // 默认为0(如不需要默认可设为null),点击时将索引赋值给active,从而实现点击选中效果
         activeVar:0,  
        //  循环列表
         listArr:["按钮1","按钮2","按钮3","按钮4","按钮5"]
        };
      },
      methods:{
       activeFun(item,index){
            // item 为被选中的元素体
            this.activeVar=index
       }
      }
    };
    </script>
    
    ​
    <style>
    // 默认样式
    .listCss{
      cursor: pointer;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      border: 1px solid #ccc;
      float: left;
      margin-right: 10px;
    }
    // 选中时的样式 (继承上方默认样式)
    .activeCss{
     background: skyblue;
    }
    </style>

    展开全文
  • Vue点击元素高亮技巧

    2021-09-27 10:53:48
    核心思想是点击时添加类名 <span @click="clickelement(index)" v-for="(item,index)" :key="index" :class="index===currenindex?'active':''"> export default中 data(){ return { currenindex:0 } } ...
  • vue点击实现背景高亮

    2022-07-19 08:45:23
    vue中或者uni中 点击 改变其背景颜色 实现点击区域高亮显示实现对比效果
  • 本文实例为大家分享了tab栏实现点击高亮,供大家参考,具体内容如下 之前面试的时候被问到过如何使用vue实现tab栏切换高亮,今天自己写demo顺便记录一下 vue官方文档里有一个基础知识点叫做对象语法 v-bind:...
  • 今天小编就为大家分享一篇Vue 菜单栏点击切换单个class(高亮)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 绑定两个class,通过设置成立条件,判断是否添加当前class <template> <div> <div v-for="item in items" :key="item.id" @click="change(item.name)" :class="{active : active == item.name...
  • vue鼠标选取文字高亮点击取消高亮(标注功能)

    千次阅读 热门讨论 2021-03-30 17:35:54
    选取文字高亮方法 handleMouseSelect () { // window.getSelection().toString()获取鼠标选定的文字 var text = window.getSelection().toString() // 避免未选择文字时对字符串进行替换 if (te
  • 下面小编就为大家分享一篇vue实现a标签点击高亮方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要为大家详细介绍了vue点击当前路由高亮小案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现点击当前标签高亮效果

    万次阅读 2018-06-21 10:25:38
    现实现点击按钮使当前按钮高亮,其他按钮复原的效果 实现思路 在data中定义即将渲染的数据,及active data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { ...
  • vue实现a标签点击切换高亮方法 <template> <div id="app"> <a class="s-bt" @click="selected(1)" :class="{active: active == 1}">aaa</a> <a class="s-bt" @click="selected(2)" :...
  • vue点击高亮效果

    千次阅读 2018-08-21 18:34:18
    需要写导航条点击高亮效果,突然忘记怎么了,百度了一下大都相同,要不就是代码繁多,看的头痛,不过现在解决了,各位同仁们可以参考一下,有什么问题可以留言 效果如下 效果如下 ...
  • 先上效果图:   我们有多组关键词,这里实现了关键词的背景色与匹配值的字体颜色值相同 先拟定一组数据 colors: [ "#FFB5C5", "#EEC900", "#D1EEEE", "#40E0D0", "#FFFF00", ... text: "老师 好看好看2
  • vue中实现点击文字后的高亮显示

    千次阅读 2020-06-28 23:25:08
    (1)点击导航栏中的相应文字,其所属栏目就高亮显示,,那这个页面所属的栏目; (2)点击文字之后,进入相应的页面,即实现路由跳转。 实现代码 Bottom.vue: <template> <div id="bottom"> <...
  • 2 点击搜索按钮以后,实现记录中关键字的样式变化(即高亮)。 二、实现过程 1 搜索条件表单 了解了实现思路,就让我们一起来看一下实现过程(关键位置均给了注释) 日志编码> <el-input

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,223
精华内容 3,289
关键字:

vue点击高亮

友情链接: dianhuaben.rar