data里
isActive:-1,
method里
checkedItem(index){
  this.isActive=index;
},
页面里
<div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)>{{item.name}}</div>


												


											
vue 点击选中改变样式的更多相关文章
	

    
								
  1. vue导航条选中项样式
		
    html: <div id="app"> <div class="collection"> <a href="#!&qu ...
    
		
    2. 
						
  2. 小程序点击事件改变样式(普通js鼠标点击事件)
		
    1.wxml中 <view class="column"> <view class="body-view {{num==1?'active':''}}& ...
    
		
    3. 
						
  3. vue点击时动态改变样式 -------  最简单的方法
		
    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...
    
		
    4. 
						
  4. vue踩坑之路--点击按钮改变div样式
		
    有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...
    
		
    5. 
						
  5. vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改
		
    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
    
		
    6. 
						
  6. vue点击切换样式，点击切换地址栏，点击显示或者隐藏
		
    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
    
		
    7. 
						
  7. jq 鼠标点击跳转页面后 改变点击菜单的样式代码
		
    点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" ...
    
		
    8. 
						
  8. 微信小程序button选中改样式-实现单选/多选
		
    小程序实现多button单选/多选 红色为选中状态 单选 多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...
    
		
    9. 
						
  9. jquery 复选框全选/全不选切换  普通DOM元素点击选中/取消选中切换
		
    1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. OSG学习：矩阵变换节点示例
			
    #include<osgViewer\Viewer> #include<osg\Node> #include<osg\Geode> #include<osg\ ...
    
			
    2. 
						
  2. WCF面试精典题汇总
			
    1.WCF接口中的参数改名问题 在写WCF Web Service接口的时候,如果你对接口的参数名做改动的时候,一定要记住Update所有应用该Web service的客户端的Referrence,否 ...
    
			
    3. 
						
  3. SpringMVC的工作流程-005
			
    1.用户发送请求至前端控制器DispatcherServlet           2.DispatcherServlet收到请求调用HandlerMapping处理器映射器.          3. ...
    
			
    4. 
						
  4. mysql中删除重复记录，并保留重复数据中的一条数据的SQL语句
			
    正好想写一条删除重复语句并保留一条数据的SQL,网上查了一部分资料写的很详细,但还是在这里写下自己的理解,以遍后续学习 .如下: 表字段和数据: SQL语句: [sql] view plain cop ...
    
			
    5. 
						
  5. c++ new 堆 栈
			
    根据32位的Windows系统默认有2GB的用户空间,则不能new超过2GB的,执行下列代码: ***]; 会出现下面的错误 error C2148: 数组的总大小不得超过 0x7fffffff 字节 ...
    
			
    6. 
						
  6. 使用Windows Live Writer拉取之前写的博客
			
    因为之前写的博客有错误需要修改,但是在Windows Live Writer中找了半天也没找到怎么拉取之前的博客,在[打开本地草稿]或者[打开最近使用过的日志]中,由于存储的项数有限,所以就找不到那篇 ...
    
			
    7. 
						
  7. P1955 [NOI2015]程序自动分析
			
    题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变 ...
    
			
    8. 
						
  8. Django+Celery+Redis实现异步任务（发送邮件）
			
    安装如下依赖库 pip install Celery pip install django-celery pip install django-redis 还要安装本地的Redis服务 setting ...
    
			
    9. 
						
  9. 【题解】Atcoder AGC#01 E-BBQ Hard
			
    计数题萌萌哒~ 这道题其实就是统计 \(\sum_{i=1}^{n}\sum_{j=i+1}^{n}C\binom{a[i] + a[j]}{a[i] + a[j] + b[i] + b[j]}\)  ...
    
			
    10. 
						
  10. 【以前的空间】BIT的两个小小运用
			
    剩下一点点时间,就来说说最近才会的关于bit的两个妙用. 求一组数的逆序对 求最长不下降序列 其实两个东西思想差不多,就已第一个为例讲讲. 就是所有数排一遍后,再按照原序列顺序(从后往前),做如下操作 ...
    
			
    11.