效果:

<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 循环多个标签,点击标签变色,再点击取消,可以同时点击多个的更多相关文章

  1. textarea与标签组合,点击标签填入标签内容,再次点击删除内容(vue)

    需求:将textarea与span标签组合,点击标签自动填入标签文本内容,再次点击删除标签文本对应内容 原理:点击标签时,将标签内容作为参数,将内容拼接在textarea的value后面,再次点击标签 ...

  2. JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别

    js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...

  3. ThinkPHP 3.2.2 在 volist 多重循环嵌套中使用 if 判断标签

    今天在 ThinkPHP 3.2.2 的试图模板中使用多重循环,用来把相应类别下对应的文章都依次循环出来,但是无论如何只能循环出类别,类别下的文章无法循环出,( 错误 ) 代码如下: <voli ...

  4. MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白

    MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVVAxOT ...

  5. js点击标签时获取当前标签属性值

    document.body.onclick=function(){ var obj = document.elementFromPoint(event.clientX,event.clientY); ...

  6. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  7. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  8. HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  9. html a标签包含a标签,浏览器的行为处理

    a标签包含a标签 浏览器可能是为了避免a的转跳重复,所以禁止了a标签包含a标签,如何你的代码中有a标签包含a标签,那么浏览器将会重新编码外层a标签,取外层a标签与内层a标签的差集,加上外层a标签,并把 ...

  10. code标签和pre标签

    code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...

随机推荐

  1. javaWeb快速入门+——初体验-HelloWorld

    文章转载自 https://www.cnblogs.com/1906859953Lucas/p/10821840.html 练习成品下载 https://www.lanzous.com/i9fljkj ...

  2. Educational Codeforces Round 81 (Rated for Div. 2) 题解

    过了n天补的题解:D AB就不用说了 C. Obtain The String 思路挺简单的,就是贪心,但是直接贪心的复杂度是O(|s|*|t|),会超时,所以需要用到序列自动机 虽然名字很高端但是就 ...

  3. SVM-支持向量机(三)SVM回归与原理

    SVM回归 我们之前提到过,SVM算法功能非常强大:不仅支持线性与非线性的分类,也支持线性与非线性回归.它的主要思想是逆转目标:在分类问题中,是要在两个类别中拟合最大可能的街道(间隔),同时限制间隔侵 ...

  4. centOS添加ipv6支持(仅限已分配ipv6地址和网关)

    https://blog.csdn.net/cnmilan/article/details/8493977 CentOS 环境下 IPv6设置方法: 1)/etc/sysconfig/network  ...

  5. 部件MSCOMCTL.OCX或其附件之一不能正确注册:一个文件丢失或无效

    部件MSCOMCTL.OCX或其附件之一不能正确注册:一个文件丢失或无效: https://blog.csdn.net/yilese/article/details/71479908

  6. centos7在命令界面使用命令可以执行,但在jenkins中输入命令报Chrome has crashed.

    问题:selenium.common.exceptions.WebDriverException: Message: unknown error: Chrome failed to start: ex ...

  7. netcore 添加swagger

    1.添加相应的nuget包  2.配置服务和swaggerui startup.cs 中 configureServices 中添加下面代码: //swagger services.AddSwagge ...

  8. 安装postman时遇到“无法定位程序输入点 SetDefaultDllDirectories于动态链接库KERNEL32.dll 上.”的问题

    安装postman时遇到“无法定位程序输入点 SetDefaultDllDirectories于动态链接库KERNEL32.dll 上.”的问题 解决办法: 1.安装系统更新补丁KB2533623,下 ...

  9. Java后端知识体系及路线【最新秘籍】

    第一层(基本语法)   第一层心法,主要都是基本语法,程序设计入门,悟性高者十天半月可成,差一点的 3 到 6 个月也说不准.如果有其他开发语言的功底相助,并且有张无忌的悟性与运气,相信第一层只在片刻 ...

  10. mui H5+ 调取 相册 拍照 功能 上传图片 + 裁剪功能

    H5+ 相册拍照图片上传 点击用户头像后,弹出actionSheet,选择从相册或是拍照:选取照片后调用上传方法: 上传图片后调用PhotoClip.js  插件进行裁剪 具体流程 弹出actionS ...