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. 3dContactPointAnnotationTool开发日志（六）
			
      一种可行的思路就是枚举一个模型的三角面片,然后判断三角形是否与另一个物体相交即可.为了让效果更好我想只渲染模型的线框.   在网上查了半天好像Unity里都没有自带的方便的渲染线框的方式,我又自己 ...
    
			
    2. 
						
  2. QWidget一生，从创建到销毁事件流
			
    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QWidget一生,从创建到销毁事件流     本文地址:http://techieliang ...
    
			
    3. 
						
  3. Qt快速入门学习笔记（画图篇）
			
    1.Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类.其中QPainter用来执行 ...
    
			
    4. 
						
  4. RT thread 设备驱动组件之USART设备
			
    本文以stm32f4xx平台介绍串口驱动,主要目的是:1.RTT中如何编写中断处理程序:2.如何编写RTT设备驱动接口代码:3.了解串行设备的常见处理机制.所涉及的主要源码文件有:驱动框架文件(usa ...
    
			
    5. 
						
  5. Spring boot——构建rest风格
			
    前言rest风格严格意义上说不是一种标准,而是一种风格,在如今互联网界,这个风格被广泛用于微服务系统之间的交互. REST简单介绍 REST(Representional State Transfer ...
    
			
    6. 
						
  6. 【BZOJ3240】【NOI2013】矩阵游戏（数论）
			
    [BZOJ3240][NOI2013]矩阵游戏(数论) 题面 BZOJ 题解 搞什么矩阵十进制快速幂加卡常? 直接数学推导不好吗? 首先观察如何从每一行的第一个推到最后一个 \(f[i]=a·f[i- ...
    
			
    7. 
						
  7. ContestHunter暑假欢乐赛 SRM 03
			
    你们也没人提醒我有atcoderQAQ... A题曼哈顿距离=欧拉距离就是在同一行或者同一列,记录下i,j出现过的次数,减去就行,直接map过. B题一开始拿衣服了,一直以为排序和不排序答案是一个样的 ...
    
			
    8. 
						
  8. Linux之根文件系统的构建20160611
			
    说一下LINUX根文件系统的构建: 制作文件系统 1. 交叉编译busybox 安装:make install CONFIG_PREFIX=/work/nfs_root/fs_mini_mdev_ne ...
    
			
    9. 
						
  9. A great tutorial with Jupyter notebook for ML beginners
			
    An end to end implementation of a Machine Learning pipeline SPANDAN MADAN Visual Computing Group, Ha ...
    
			
    10. 
						
  10. 如何给apk文件签名
			
    1.签名的意义 为了保证每个应用程序开发商合法ID,防止部分开放商可能通过使用相同的Package Name来混淆替换已经安装的程序,我们需要对我们发布的APK文件进行唯一签名,保证我们每次发布的版本 ...
    
			
    11.