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. TCP系列17—重传—7、SACK下的重传
			
    我们之前介绍SACK选项的时候说过,SACK可以把接收端系列号空间的洞反映给发送端,因此发送端可以更充分的理解接收端的情况,而进行更好的重传恢复过程.这种过程有时候也叫做advanced loss r ...
    
			
    2. 
						
  2. 【Docker 命令】 - search 命令
			
    docker search : 从Docker Hub查找镜像 语法 docker search [OPTIONS] TERM OPTIONS说明: --automated :只列出 automate ...
    
			
    3. 
						
  3. VS05错误：部署WEB文件失败
			
    直接生成一个空项目就不存在这个问题了.
    
			
    4. 
						
  4. Android基础------高级ul：消息提示
			
    前言:Android消息提示笔记,刚刚接触Android 1.静态方法Toast 直接调用静态方法 //消息提示(context,"内容",固定时间) Toast.makeText ...
    
			
    5. 
						
  5. C结构体【转】
			
    “结构”是一种构造类型,它是由若干“成员”组成的.每一个成员可以是一个基本数据类型或者又是一个构造类型.结构既是一种“构造”而成的数据类型,那么在说明和使用之前必须先定义它,也就是构造它.如同在说明和 ...
    
			
    6. 
						
  6. bzoj2437-兔兔与蛋蛋
			
    题目 分析 第一次做这种题,其实很简单. 只能经过一次的博弈可以考虑转化为二分图博弈. 棋盘上有黑白色的棋子,可以把这个游戏看作空格在棋子间移动,于是就想到,把棋盘黑白染色,以空格为黑,那么空格的移动 ...
    
			
    7. 
						
  7. SVG总结小知识
			
    SVG:可缩放矢量图形.全称是:Scalable Vector Graphics SVG使用 XML 格式定义图像.   SVG是使用 XML 来描述(二维图形和绘图)程序的语言.   SVG是W3C ...
    
			
    8. 
						
  8. BZOJ3167/BZOJ4824 HEOI2013SAO/CQOI2017老C的键盘（树形dp）
			
    前者是后者各方面的强化版. 容易想到设f[i][j]表示i子树中第j小的是i的方案数(即只考虑相对关系).比较麻烦的在于转移.考虑逐个合并子树.容易想到枚举根原来的排名和子树根原来的排名,算一发组合数 ...
    
			
    9. 
						
  9. I/O复用----poll
			
    2018-08-01 (星期三)poll(): #include <sys/poll.h> int poll (struct pollfd *fd, unsigned int nfds,  ...
    
			
    10. 
						
  10. 20165218 学习基础和C语言基础调查
			
    个人技能及阅读心得 个人技能之绘画 绘画是我从很小便开始接触的,从最初的简笔画到国画.素描.水粉,大约也学了七八年.但是到了高中之后,就逐渐放下了. 记得当初学素描时,老师的一句话让我记忆犹新,她说, ...
    
			
    11.