vue实现点击追加选中样式效果

2024-07-28 18:39:29

DOM部分

<ul>
   <li class="liMenu"
    :class="idx==index?'hover':''" @click="son(item,idx)" v-for="(item,idx) in menu"
    :key="idx">{{item}}
   </li>
</ul>

data(){
    return{
      menu:['首页','列表页','详情页'],
      index:0
    }
  },
  methods:{
   son(item,idx){
     this.index=idx;
   }
  }

CSS

.liMenu{
 margin-right: 20px;
 cursor:pointer;
}
.liMenu.hover{
 color:red;
}

效果：

以上这篇vue实现点击追加选中样式效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

利用vue.js实现被选中状态的改变方法

在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中.而使用vue之后,已经能够实现页面根据数据的多少动态生成.而且代码量也大幅度减少. html部分的代码: <div data-role="page " class="page "> <div class="center " id="app"> &
Vue2.0点击切换类名改变样式的方法

1.使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
vue 导航内容设置选中状态样式的例子

如图所示,我们一般需要切换的时候选中导航给个active样式, 而router-link 标签在选中的时候会自动给整个标签添加一个 router-link-active的class 可给router-link 标签里面的span.i标签如下设置,非常简单,下面是stylus的写法,不需要的话也可以写成平时的css写法 .router-link-active span i color: red 以上这篇vue 导航内容设置选中状态样式的例子就是小编分享给大家的全部内容了,希望能给大家一个参考
vue使用v-for实现hover点击效果

使用Vue来实现鼠标悬停效果.可以使用事件处理器v-on指令(简写为:@)来完成.为标签绑定mouseenter以及mouseleave事件即可. hover是css中的选择器,用于选择鼠标指针浮动在上面的元素.所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式. 在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变
vue实现点击追加选中样式效果

DOM部分 <ul> <li class="liMenu" :class="idx==index?'hover':''" @click="son(item,idx)" v-for="(item,idx) in menu" :key="idx">{{item}} </li> </ul> JS data(){ return{ menu:['首页','列表页','详
vue实现点击当前标签高亮效果【推荐】

实现点击按钮使当前按钮高亮,其他按钮复原的效果实现思路 •在data中定义即将渲染的数据,及active data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, { name: '水果生鲜' }, { name: '服装鞋帽' }, { name: '其它' } ], active:'' } } ... •定义高亮的标签类名 .active { background: #fd7522; bord
Vue实现点击箭头上下移动效果

<body> <div id="app"> <ul> <li v-for="(item,i) in list">{{item.name}} //i<list.length-1 需要的是0,1,2,3 需要四个向上的箭头长度为5 减1之后长度为4 小于4就是0,1,2,3 <button v-show="i<list.length-1" @click="down(i)&q
vue实现点击选中,其他的不选中方法

如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta
Vue实现点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏. 简单写个Demo  <button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button>  <div v-if="ShowHidden" @click.stop="&quo
vue循环中点击选中再点击取消(单选)的实现

没有展开时点击展开之后 <div class="flashread_item_box_time"> <span class="moment_time">9分钟前</span> <div class="flashread_item_box_zan"> <span class="flashread_item_box_item"><i class="ico
vue实现点击展开点击收起效果

安装vue的步骤在这里就不进行赘述了,下面直接进入正题首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascript','java','php' //进行显示的数据 ], showAll:false, //标记数据是否需要完全显示的属性 } } 使用computed对data进行处理: computed:{ showList:function(){ if(this.showAll == false){ //当
解决vue点击控制单个样式的问题

既然是控制单个样式,我们的html里面的内容一定是v-for="":渲染出来,一定要养成一个好习惯,v-for="(item,index) in items";index就是我们所说的索引. <div class="border" v-for="(item,index) in tolos" :key="index"> 我做的项目类似于微信朋友圈,弹出赞与评论按钮,点击一个全体都会弹出:我们要解决
Vue商品控件与购物车联动效果的实例代码

本篇我们将构建商品控件与购物车联动. 商品控件商品控件的结构编写在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写. <template> <div class="goods"> <div class="menu-wrapper" ref="menuScroll"> <ul>  <li class="
Vue实现点击按钮进行上下页切换

本文实例为大家分享了Vue实现点击按钮进行上下页切换的具体代码,供大家参考,具体内容如下案例效果: 完整代码如下: <template> <div id="page"> <button class="btn" @click="prePage()">上一页</button> <ul> <li :class="selected == inde

vue实现点击追加选中样式效果

相关推荐

随机推荐