vue.js实现点击后动态添加class及删除同级class的实现代码
最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class。如图:
开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下
html:
<div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{{guigeName}}</p> <p class="guigeP guigeP01">规格</p> <div class="indexGuiGe"> <span v-for="value,index in guigeList" v-on:click="guige(index)" v-bind:class="{on:index==guigeSpan}">{{value.guige_name}}</span> </div> <p class="guigeP">口味</p> <div class="indexKouwie"> <span v-for="value,index in kouweiList" v-on:click="kouwei(index)" v-bind:class="{on:index==kouweiSpan}">{{value.guige_name}}</span> </div> </div> </div>
script:
var guige=new Vue({ el: '#guige', data:{ guigeSpan:"-1", //控制点亮状态 -1为默认不点亮 kouweiSpan:"-1", //控制点亮状态 }, methods:{ guige:function(index){ //当点击时候点亮,同级的span标签删除Class this.guigeSpan = index; }, kouwei:function(index){ this.kouweiSpan = index; }, } })
总结
以上所述是小编给大家介绍的vue.js实现点击后动态添加class及删除同级class,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
js实现添加删除表格(两种方法)
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ margin:0 auto; background:yellow; border:4px double #808080; width:600px; text-alig
-
原生js封装添加class,删除class的实例
一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ")); for(var i=0;i<arr.length;i++){ for(var k=arr.length-1;k>i;k--){ (arr[k]==="")&&arr.splice(k,1); (arr[i]===arr[k])&&
-
JavaScript实现向select下拉框中添加和删除元素的方法
本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法.分享给大家供大家参考,具体如下: 1.说明 a. 利用append()方法向下拉框中添加元素 b. 利用remove()方法移除下拉框中最后一个元素 2.实例源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
-
JS点击动态添加标签、删除指定标签的代码
1.div标签 <div id="mDiv3"> <p>1</p> <button onclick="myFun9()">添加</button> </div> 2.js function myFun9() { var mDiv3 = document.getElementById("mDiv3"); //获取组件1 var eleme = document.createEle
-
javascript cookie的基本操作(添加和删除)
javascript cookie的基本操作(添加和删除) 1.添加一个cookie:response.addCookie(Cookie c); 2.获取cookie集合: request.getCookies(); 3.新建一个cookie: new Cookie(String name,String value) - Cookie在构造的时候就需要设定好cookie的名字和值 4.获取cookie的名字:cookie.getName(); 5.获取cookie的值:cookie.getVal
-
详解原生JS动态添加和删除类
由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等到一个 dom 对象(也叫dom元素), 通过document.getElement--的几种方法得到 如` let element = document.getElementById("box"); 1.通过类名, 获取类名: el.className, 赋值: el.className = "clas
-
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
本文实例讲述了JavaScript数组,JSON对象实现动态添加.修改.删除功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>javascript里面的数组,json对象,动态添加,修改,删除示例</t
-
vue.js实现点击后动态添加class及删除同级class的实现代码
最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下 html: <div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{
-
vue.js 实现输入框动态添加功能
代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> &
-
JS如何实现动态添加的元素绑定事件
这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断点击了哪个,然后做相应的操作,第二种是通过事件委托的原理来处理,事件委托将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项,这种更
-
Vue.js+HighCharts实现动态请求展示时序数据
本文实例为大家分享了Vue.js+HighCharts实现动态请求展示时序数据的具体代码,供大家参考,具体内容如下 <template> <el-container> <el-header> <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="ha
-
使用js对select动态添加和删除OPTION示例代码
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc
-
原生JS和JQuery动态添加、删除表格行的方法
本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
-
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
本文实例讲述了JS实现为动态添加的元素增加事件功能.分享给大家供大家参考,具体如下: 我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js动态添加事件</title>
-
JS简单实现动态添加HTML标记的方法示例
本文实例讲述了JS简单实现动态添加HTML标记的方法.分享给大家供大家参考,具体如下: 一 介绍 动态添加一个HTML标记可以使用createElement()方法来实现. CreateElement()方法可以根据一个指定的类型来创建一个HTML标记. 语法: sElement=document.createElement(sName) sElement:用来接收该方法返回的一个对象. sName:用来设置HTML标记的类型和基本属性. 二 应用 动态添加一个文本框 本示例通过单击"动态添加文
-
原生JS实现动态添加新元素、删除元素方法
1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态添加新元素</title> </head> <body> <ul class="example"> <li class="child">Coffee</li> <li c
随机推荐
- 基于JavaBean编辑器读取peroperties文件的实例
- javascrip客户端验证文件大小及文件类型并重置上传
- 类似CSDN图片切换效果脚本
- IOS 多线程GCD详解
- PHP中基本符号及使用方法
- 文本修改留痕
- CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
- C#判断指定驱动器是否是Fat分区格式的方法
- C语言之实现字符串小写变大写的实例
- 几个扩展存储过程使用方法
- js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
- Android自定义View实现弹性小球效果
- Android判断用户的网络类型实例讲解(2/3/4G、wifi)
- php判断当前操作系统类型
- Android的Glide库加载图片的用法及其与Picasso的对比
- c#实现把异常写入日志示例(异常日志)
- 第十二节 类的自动加载 [12]
- CISCO 技术集合二
- 我国企业电子商务交易总额达15000亿元
- Apache Spark 2.0 在作业完成时却花费很长时间结束