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. 《学习OpenCV》课后习题解答5
			
    题目:(P104) 为一个图像创建多个图像头.读取一个大小至少为100*100的图像.另创建两个图像头并设置它们的origion,depth,nChannels和widthStep属性同之前读取的图像 ...
    
			
    2. 
						
  2. PAT L1-044 稳赢
			
    https://pintia.cn/problem-sets/994805046380707840/problems/994805086365007872 大家应该都会玩“锤子剪刀布”的游戏:两人同时 ...
    
			
    3. 
						
  3. CentOS/Linux 开放80、8080端口或者开放某个端口
			
    装载系统的时候只开启了22端口.结果再装完Nginx+php+mysql 后不能访问网站. iptables -L -n 查看防火墙设置发现没开启80端口 由于Linux防火墙默认是关闭的.可以用两种 ...
    
			
    4. 
						
  4. MD5加密的使用
			
    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
    
			
    5. 
						
  5. Java多线程中的join方法
			
    新建一个Thread,代码如下: package com.thread.test; public class MyThread extends Thread { private String name ...
    
			
    6. 
						
  6. xpath获取块元素下<br>下的信息
			
    再爬虫取字段的时候遇到一种类似下面的结构: <p> <br> "通用名称:xxxxxx" </p> 用xpath取的方式://p//text() ...
    
			
    7. 
						
  7. hdu2121-Ice_cream’s world II
			
    给出一个有向图,求最小树形图和它的最小的根. 分析 这个题又写了一晚上-我之前的朱刘算法写法是我乱想的,只有那道题可以过--所以去找了一份代码来看,发现我的写法超级麻烦啊,所以就学习了一下那种写法,非 ...
    
			
    8. 
						
  8. （八）Redis事务与连接操作
			
    事务: multi # 标记一个事务块的开始.事务块内的多条命令会按照先后顺序被放进一个队列当中,最后由EXEC命令原子性地执行 exec # 执行所有事务块内的命令 descard # 取消事务,放 ...
    
			
    9. 
						
  9. POJ1006：Biorhythms——题解
			
    http://poj.org/problem?id=1006 题目大意: 人生来就有三个生理周期,分别为体力.感情和智力周期,它们的周期长度为23天.28天和33天.每一个周期中有一天是高峰.在高峰这 ...
    
			
    10. 
						
  10. 洛谷 P1966 火柴排队 解题报告
			
    P1966 火柴排队 题目描述 涵涵有两盒火柴,每盒装有 \(n\) 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为: \(\s ...
    
			
    11.