vue---------toggle class切换单选多选class切换

最新推荐文章于 2023-03-25 20:56:46 发布
最新推荐文章于 2023-03-25 20:56:46 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： VUE 文章标签： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_SSY/article/details/80895582
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.app {
				width: 300px;
				margin: 100px auto;
			}
			
			span {
				display: inline-block;
			}
			
			.btn {
				width: 30px;
				height: 30px;
				border: 1px solid #DCDCDC;
				border-radius: 50%;
				cursor: pointer;
			}
			
			.active1{
				background: red;
			}
			
			.unactiveRadio {
				background: #fff;
			}
		</style>
	</head>

	<body>
		<div class="app">
			<!--1.toggleClass切换-->
			<div class="demo1">
				<span class="btn" :class="{'active1':ischoose}" @click="toggleDemo1"></span>
			</div>
			<!--2.单选-->
			<ul class="demo2">
				<li class="btn" v-for="(list,index) in radioList" @click="selectRadio(list,index)" :class="{'active1':list.active,'unactiveRadio':!list.active}">{{list.select}}</li>
			</ul>
			<!--3.多选-->
			<ul class="demo3">
				<li class="btn" v-for="(list,index) in checkList" @click="check(list,index)" :class="{'active1':list.active}">{{list.check}}</li>
			</ul>
		</div>

	</body>

</html>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	new Vue({
		el: ".app",
		data() {
			return {
				ischoose: false,
				activeRadio: false,
				radioList: [{
						select: ''
					},
					{
						select: ''
					}
				],
				checkList: [{
						check: ''
					},
					{
						check: ''
					},
					{
						check: ''
					}
				]
			}
		},
		methods: {
			toggleDemo1: function() {
				this.ischoose = !this.ischoose
			},
			selectRadio(list, index) {
				this.$nextTick(function() {　　　　　　　　
					this.radioList.forEach(function(list) {　　　　　　　　　　
						Vue.set(list, 'active', false);　　　　　　　　
					});　　　　　　　　
					Vue.set(list, 'active', true);　　　　　　
				});
			},
			check(list, index) {
				if(list.active){
					Vue.set(list, 'active', false);　
				}else{
					Vue.set(list, 'active', true);　		
				}
			}
		}
	})
</script>

M_SSY
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue toggle做一个点击切换class(实例讲解)
08-27
下面小编就为大家分享一篇使用vue toggle实现点击切换class的示例。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
vue toggle做一个点击切换class
热门推荐
知行合一
04-10 1万+
vue toggle做一个点击切换class<template> <div> <span :class="{'bg-primary text-danger':isA,'bg-success text-white':!isA}" @click="toggle()">AAAAA</span> </div> </template><script> export de
vue 切换 class （切换类） toggleClass 单选 多选
周金鱼啊
08-07 1616
注：以下三个例子，均以切换active为例 一、切换 toggleClass <div class="btn" :class="{'active':isChoose}" @click="togglePay"></div> data(){ return { isChoose : false } }, methods:{ togglePay:function(){ this.isChoose = !this.i..
vue怎么实现模块化【单选切换】改变样式的功能
weixin_50450473的博客
12-14 1325
index.vue <template> <div class="learn_item" v-for="(task, taIndex) of taskDetailList" :key="taIndex"> <div class="l_item" @click="currentClick(taIndex)"> <div class="item_point" :class="taIndex!==0?'':'hidden'"> ...
：class多选变色
LQS000的博客
03-25 103
【代码】：class多选变色。
vue-element-admin中文版本
最新发布
07-20
9. **国际化(i18n)**：Vue-element-admin 可能集成了 i18n 国际化插件，支持多语言切换，满足全球化需求。 10. **PWA 支持**：Progressive Web App，通过 Service Worker 和 Manifest 文件，使网页具备离线缓存、...
vue-peek vscode 插件
08-29
vue-peek
vue-router.js
12-30
vue路由vue-router.js文件下载
解决vue-router 切换tab标签关闭时缓存问题
10-15
// 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态 this.$destroy(true) next() } ``` 另外，Vue Router还提供了`router.replace()`方法，它会替换当前的history记录而不是添加新的记录...
vue使用vue-cli快速创建工程
01-19
本文介绍了vue使用vue-cli快速创建工程，分享给大家，具体如下： vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue ...
Vue2.0 实现单选互斥的方法
12-10
本文介绍了Vue2.0 实现单选互斥的方法，分享给大家，具体如下： 需要实现如上图的功能 1. 首次加载页面，根据data里的catgoryId高亮对应的选项 2. 点击某个选项，该选项高亮，其他去掉高亮 代码结构： <template> <dd @click="changeCategory(currCourseFirst.categoryId)" v-for="currCourseFirst in currCourse.currCourseFirst" :key="currCourseFirst.categoryId" :class=
vue中实现元素选中互斥
weixin_30919571的博客
06-13 1189
vue中不提倡直接操作dom元素，所以这里使用类名实行互斥效果。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <templ...
jQuery实现全选、不选和反选功能
denghous8817的博客
10-23 110
jQuery结合Font Awesome字体图标实现全选、不选和反选功能 Font Awesome字体图标链接地址：http://www.fontawesome.com.cn/faicons/ 效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&...
vue实现JQ的toggleClass功能
Abez_c的博客
10-19 2059
&lt;tr v-for="item in tableData.body" :key="item.id"&gt; &lt;td&gt; &lt;label @click="toggleClass(item)" :class="{'label':item.label}"&gt; &lt;input type="che
vue 样式class多选、单选，vue多选，vue单选
weixin_43728978的博客
06-17 958
vue多选、vue单选、vue不使用radio、vue选中添加样式、vue选中添加效果
vue实现切换class(与style的绑定)
物以稀为贵yeah
06-15 5321
1、先在data里面添加一个变量：isact，默认可设置为0data() { isact: 0 } 2、在页面中可以这么写：<li v-for="(item, index) in shopSort" @click="tabsort(index)" :class="{ active: iscur == index }">{{ item }}</li>3、在methods中添加一个方法：tab
vue里如何实现tab类似的切换class？
hsany330的专栏
12-03 1万+
很多种方法可以实现你想要的效果：代码示例： for='item in data' v-text="item.name" :class="{cur:item.iscur}" @click="setCur($index)"> 在methods中加入方法setCur() setCur: function (index) { this.data.map(function (v,i) {
vue-cli3项目搭建与优化全攻略
"vue-cli3 从搭建到优化的详细步骤" 在本文中，我们将深入探讨如何使用vue-cli3从零开始搭建一个Vue.js项目，并逐步对其进行优化。Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，它极大地简化了 Vue 项目的初始化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值