vue.js 实现点击后动态添加 class 并删除同级 class

秒速五厘米 2022-05-30 05:56 426阅读 0赞

<div id = "prizeReport"><div class="swiper-container">
        <div class="swiper-wrapper type-nav clearfloat">
            <div class="swiper-slide type-nav-box" :class="type.selected ? 'active' : ''"
    	    v-for="(type, index) in types" v-on:click="choose(index)">
    	    <span class="underline">{
       {type.type}}</span>
            </div>
        </div>
    </div></div>

(function () {
    	var prizeReport = new Vue({
    		el: '#prizeReport',
    		data: {
    			seen : true,
    			checkedColor : false,
    			types:[
    				{type:'全部', selected:true},
    				{type:'食品', selected:false},
                	                {type:'餐饮', selected:false},
    	                        {type:'药品', selected:false},
    	                        {type:'医疗器械', selected:false},
    	                        {type:'化妆品', selected:false}
    	                ]
    		},
    		mounted: function () {
                        this.$nextTick(function() {
                	    this.initSwiper();
                    });
            },
    		methods : {
    			/**
    			 * 初始化轮播图
    			 */
    			initSwiper : function () {
    				var that = this;
    				var mySwiper = new Swiper('.swiper-container', {
    					width: window.screen.availWidth,
    					 slidesPerView : 4,
    				});
    			},
    			
    			choose:function (index) {
    				for (var i = 0; i < this.types.length; i++) {
    					this.types[i].selected = false;
    				}
               		this.types[index].selected = true;
           		        }
    		}
    	});
    })();

发表评论取消回复

表情：

评论列表（有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery 点击事件点击元素添加class，兄弟节点移除class

迎大家一起交流学习n(\*≧▽≦\*)n $("circle").on('click', 'li',function(){ $(this...

﹏ヽ暗。殇╰゛Y/ 2024年04月18日 18:27/ 0 赞/ 76 阅读

相关 jQuery点击添加删除class

原文链接：http://dt2008.cn/327/ 替换class这个功能对于点击事件是比较常用的。举个例子，想小编那样的菜单按钮就是用到这个功能的，点击按钮后添加个

柔光的暖阳◎/ 2023年06月28日 06:09/ 0 赞/ 18 阅读

相关 vue class点击切换颜色

[https://www.cnblogs.com/zwnsyw/p/12333992.html][https_www.cnblogs.com_zwnsyw_p_12333992

妖狐艹你老母/ 2022年12月30日 03:56/ 0 赞/ 166 阅读

相关 vuejs里：style和：class的区别（vue动态操作class和style）

[https://cn.vuejs.org/v2/guide/class-and-style.html][https_cn.vuejs.org_v2_guide_class-a

「爱情、让人受尽委屈。」/ 2022年11月12日 08:26/ 0 赞/ 255 阅读

相关原生js实现添加和删除class

前言：对于习惯jquery的写法以后对于原生总是不适应，实际原生中也是有直接简单的方法的。 1、添加class 添加：节点.classList.add("

╰+攻爆jí腚メ/ 2022年09月12日 11:46/ 0 赞/ 202 阅读

相关 jquery动态添加、删除class样式

1.获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class： var p_class = $("p").

叁歲伎倆/ 2022年08月03日 15:53/ 0 赞/ 239 阅读

相关 vue.js 实现点击后动态添加 class 并删除同级 class

<div id = "prizeReport"><div class="swiper-container"> <div class="swiper-wr

秒速五厘米/ 2022年05月30日 05:56/ 0 赞/ 427 阅读

相关小程序动态添加class 以及点击捕获currentTarget和target的区别

简述由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程

ゞ浴缸里的玫瑰/ 2022年05月15日 07:53/ 0 赞/ 778 阅读

相关 js 动态添加和删除class

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] el.classList.remove("fad

╰半橙微兮°/ 2022年01月16日 04:53/ 0 赞/ 377 阅读

相关 vue使用class添加动态类

<template> <d2-container> <h3>class使用测试页面</h3> <p :class="1 <

我会带着你远行/ 2021年07月26日 12:35/ 0 赞/ 435 阅读