vue 循环多个标签,点击标签变色,再点击取消,可以同时点击多个
效果:

<div class="relFacilityTitcon">
<i v-for="(item,index) in facilityList" :key="index" @click="changeSpan(index);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" >{{item}}</i>
</div>
data:{
spanIndex:[],
}
methods: {
changeSpan(index){
let arrIndex = this.spanIndex.indexOf(index);
// console.log(arrIndex);
if(arrIndex>-1){
this.spanIndex.splice(arrIndex,1);
}else{
this.spanIndex.push(index);
}
},
vue 循环多个标签,点击标签变色,再点击取消,可以同时点击多个的更多相关文章
- textarea与标签组合,点击标签填入标签内容,再次点击删除内容(vue)
需求:将textarea与span标签组合,点击标签自动填入标签文本内容,再次点击删除标签文本对应内容 原理:点击标签时,将标签内容作为参数,将内容拼接在textarea的value后面,再次点击标签 ...
- JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别
js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...
- ThinkPHP 3.2.2 在 volist 多重循环嵌套中使用 if 判断标签
今天在 ThinkPHP 3.2.2 的试图模板中使用多重循环,用来把相应类别下对应的文章都依次循环出来,但是无论如何只能循环出类别,类别下的文章无法循环出,( 错误 ) 代码如下: <voli ...
- MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白
MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVVAxOT ...
- js点击标签时获取当前标签属性值
document.body.onclick=function(){ var obj = document.elementFromPoint(event.clientX,event.clientY); ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- Dom,查找标签和操作标签
Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
- HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- html a标签包含a标签,浏览器的行为处理
a标签包含a标签 浏览器可能是为了避免a的转跳重复,所以禁止了a标签包含a标签,如何你的代码中有a标签包含a标签,那么浏览器将会重新编码外层a标签,取外层a标签与内层a标签的差集,加上外层a标签,并把 ...
- code标签和pre标签
code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...
随机推荐
- web 项目添加 x86 的dll 引用,模块 DLL c:\WINDOWS\system32\inetsrv\aspnetcore.dll 未能加载。
最近的项目要添加一个 x86 编译的dll, 首先添加引用,编译,报错: 首先判断是 项目中不能添加 x86 的引用,所以把所有的项目都按照 x86 的方式编译一遍,同时对应IIS 的应用池,也修改为 ...
- 154.Ajax处理csrf防御
在普通的form表单中采用post请求提交数据,可以在form表单的method=post的form标签下面,添加一个csrf_token标签{% csrf_token %},或者是直接手动的添加一个 ...
- SpringBoot学习- 8、整合Shiro
SpringBoot学习足迹 Shiro是什么,引自百度百科:Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.使用Shiro的易于理解的API,您可以快 ...
- Vs2013以管理员身份运行
VS快捷方式目录下的devenv.exe 右键->兼容性疑难解答->疑难解答程序->勾选该程序需要附加权限即可,以后每次打开VS时都会以管理员身份运行了!
- SpringBoot 测试基类
每次写单元测试都要重复写一些方法.注解等,这里我写了一下测试的基类 (1) 记录测试方法运行的时间 (2)两个父类方法 print,可打印list和object对象 (3)一个属性 logger 记录 ...
- ECMAScript基本语法——③数据类型
Java内有两种 基本数据类型:4类八种 引用数据类型:对象 JavaScript也有两种 原始数据类型 其实是基本数据类型 number:数字.整数.小数.NaN(特殊的数字,not a numbe ...
- python接口自动化测试之http协议(一)
1.http(超文本传输)协议:是一个基于请求与响应模式的.无状态的(不会记住每个请求的状态).应用层协议 2.url详解 https://www.baidu.com/s?ie=utf-8&f ...
- Ajax返回值一直获取不到啊
原理: 同步异步的问题 Return 位置的问题 首先同步异步改为async : false, Return 的值写在ajax外部 function submit_answer(){ ...
- xstart访问centos7
参考文档:https://blog.csdn.net/wuzhimang/article/details/51523867
- js获取当前页面的url网址信息
设置或获取整个 URL 为字符串: window.location.href 获取内容:http://10.100.0.8:7000/SVP/ "window.location.href&q ...