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> ...
随机推荐
- 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(4.12-加-6.2-加-7.2.5.2)Fused_Operations
4.12 Fused Operations 融合操作 融合操作通过“fusing”把两个简单的命令融合一起来支持一个更复杂的命令.协议规定这个特性是可选的:如果支持此特性,需要在Figure 247 ...
- 题解【洛谷P1083】[NOIP2012]借教室
题面 二分到哪一个申请人要修改订单,可以差分\(+\)前缀和达到\(\Theta(n)\)的\(\text{check}\). 具体细节见代码. #include <bits/stdc++.h& ...
- 三行代码实现垂直居中和cube
三行代码实现上下居中 position: relative;top: 50%;transform: translateY(-50%); 效果如下: 代码: <!DOCTYPE html> ...
- Python标准库之shelve模块(序列化与反序列化)
shelve模块是一个简单的key,value将内存数据通过文件持久化的模块,可以持久化任何picklel可支持的Python数据格式. 序列化 序列化源代码: import shelve impor ...
- vscode里的NPM脚本
NPM脚本的开启与关闭 点击设置-功能-任务 控制为所有任务提供程序扩展启用"提供任务".如果"任务:运行任务"命令速度较慢,则禁用任务提供程序的自动检测可能会 ...
- 二分-D - Can you solve this equation?
D - Can you solve this equation? Now,given the equation 8*x^4 + 7*x^3 + 2*x^2 + 3*x + 6 == Y,can you ...
- ECMAScript基本语法——④变量
简介 变量:一小块存储数据的内存空间先申请了一块内存空间,规定空间的存储类型,给空间赋值3, 想找到这个3可以通过内存空间的地址值,但是通过地址值太麻烦了,给这个空间起了一个名字a 通过这个a可以找到 ...
- 一文带你看清HTTP所有概念(转)
一文带你看清HTTP所有概念 上一篇文章我们大致讲解了一下 HTTP 的基本特征和使用,大家反响很不错,那么本篇文章我们就来深究一下 HTTP 的特性.我们接着上篇文章没有说完的 HTTP 标头继 ...
- 巨杉数据库入选年度Gartner Peer Insights报告,获得市场高度评价
Gartner Peer Insights 年度评选结果于近日出炉,在数据库管理系统市场报告中,巨杉数据库获得了总平均分4.7(满分5分)的成绩,在众多国际厂商中位居第三,是国内唯一一家入选的数据库厂 ...
- conn (php)
<?php$host="localhost";$db_user="root"; //数据库用户$db_pass=""; //数据库密码 ...