用vue2.0实现点击选中active，其他选项互斥的效果
在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的dom取消active的类，给当前元素加上这个类名，说的很啰嗦，直接来看代码说话吧（表示楼主用的是jq）:
<style>
* {
margin: 0;
padding: 0;
} li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
} li:active {
cursor: pointer;
} .active {
background-color: aqua;
}
</style>
<script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
</head>
<body>
<ul>
<li>this is pne</li>
<li>this is two</li>
<li>this is three</li>
</ul>
</body>
<script>
$(() => {
$("li").click((e) => {
$("li").removeClass("active");
$(e.target).addClass("active");
})
})
</script>
效果如下图所示：
但是在vue里面，是不提倡进行dom操作的，如果非进行dom的话，vue2.0里面有一个ref的属性，是可以达到dom的效果的。那么接下来我们不接住dom来进行操作：
由于习惯了webpack和vue-cli脚手架，所以楼主所有vue的代码都是放在webpack的脚手架当中进行，还使用了pug和scss的预处理器，vue的代码如下：
<template lang="pug">
ul
li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}}
</template>
<style lang="scss">
li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
&:hover {
cursor: pointer;
}
}
.active{
background-color: aqua;
}
</style>
<script>
export default{
data(){
return {
classArr: ["one", "two", "three"],
num:"",
}
},
methods: {
result(index){
this.num = index;
}
},
computed:{
resultNum(){
return this.num;
}
}
}
</script>
思路如下：
这段代码使用的是index这个关键字，还使用了computed这个计算属性，当当前的index索引与点击的当前元素的下标相同的时候，便会触发active这个类名。说的很简练，不懂的可以加博主一起探讨
用vue2.0实现点击选中active，其他选项互斥的效果的更多相关文章
- vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
- vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...
- vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
- 干货分享：vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- vue2.0做移动端开发用到的相关插件和经验总结
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（三）
前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...
- 【数据售卖平台】—— Vue2.0入门学习项目爬坑
前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...
- vue2.0 开发实践总结之入门篇
vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...
- 基于vue2.0的分页组件开发
今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
随机推荐
- mysql的rand函数
项目中需要动态随机生成一些固定位数的随机数,如8位,5位等. 之前看到的写法是这样 ROUND(ROUND(RAND(),5)*100000) 这样写不太准确,有几率出现4位的情况,Rand() 函数 ...
- int.TryParse非预期执行引发的思考 ASP.NET -- WebForm -- 给图片添加水印标记 Windows -- 使用批处理文件.bat删除旧文件
int.TryParse非预期执行引发的思考 问题出现 这天在写一个页面,想谨慎些就用了int.TryParse,结果出问题了. 代码如下: Copy int id = 1000; //Reque ...
- sql 百分比
select [city], bfb=cast(cast(count(*)*100./(select count(*) from [UserBasicInfo]) as decimal(10,0)) ...
- 初始化列表（const和引用成员）、拷贝构造函数
一.构造函数初始化列表 推荐在构造函数初始化列表中进行初始化 构造函数的执行分为两个阶段 初始化段 普通计算段 (一).对象成员及其初始化 C++ Code 1 2 3 4 5 6 7 8 9 1 ...
- 数据流图（DFD）画法
数据流图(DFD)画法要求 一.数据流图(DFD) 1.数据流图的基本符号 数据流图由四种基本符号组成,见图5-4-1所示. 图5-4-1 数据流图的基本符号 例:图5-4-2是一个简单的数据流图, ...
- 解决Eclipse无法打开“Failed to load the JNI shared library”
这是因为JDK配置错误所导致的现象. 一般说来,新购笔记本会预装64位的windows系统,而在网上下载软件时,32位会优先出现在页面中(现在来说是这个情况,但我认为未来64位会越来越普及). 如果你 ...
- Linux下UTF-8和GB2312互相转换的函数
#include<iconv.h> #include <stdio.h> #include<iconv.h>using namespace std; int utf ...
- Atitit.软件GUI按钮与仪表盘--db数据库区--导入mysql sql错误的解决之道
Atitit.软件GUI按钮与仪表盘--db数据库区--导入mysql sql错误的解决之道 Keyword::截取文本文件后部分 查看提示max_allowed_packet限制 Target Se ...
- cocos2d 中使用jni Java 调用 C++ 方法
1.首先是LoadLibrary cocos2d中的C++代码会编译成一个.so文件.放在安卓文件夹下的libs/armeabi 下,然后java会load进来,这步我们不用做了,由于cocos2d已 ...
- C++之extern关键字
extern关键字 extern extern关键字的作用就是告诉编译器,它修饰的变量或者函数在别处定义. extern "C" 代码一: cppExample.h #ifndef ...