用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的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
随机推荐
- Linux-软件包管理-源码包安装
rpm -q gcc 查看c语言编译器是否已经安装 在浏览器输入:http://mirror.bit.edu.cn/apache/httpd/ 下载2.2.29这个包 cd ~ 回到root目录 ls ...
- 1 - Reverse Integer
Reverse digits of an integer.Example1: x = 123, return 321Example2: x = -123, return -321Discuss: 1. ...
- MySQL多线程同步-Transfer使用测试
由淘宝核心系统研发—数据库组开发的MySQL-Transfer,用于解决MySQL主从同步延迟的问题,从MySQL单线程到多线程的工作模式.可以观看@丁奇的相关资料: MySQL多线程同步-Trans ...
- Atitit.404错误解决标准流程and url汉字中文路径404错误resin4 resin chinese char path 404 err解决
Atitit.404错误解决标准流程and 错误resin4 resin chinese char path 404 err解决 1. #原因解析 1 2. #解决方式 2 3. 输出图片流... 2 ...
- CentOS安装使用git
yum install git yum install git-gui (可选) git config --global user.name "gg" git config --g ...
- C Pointer-to-Function 与 C++ Pointer-to-MemberFunction 的区别
在看APUE Figure1.10的时候发现signal(SIGINT, sig_int)这里的sig_int直接用的函数名,但是看Thinking-in-C++ Vol.2的时候发现mem_fun( ...
- Ubuntu设置中文-以及-安装拼音输入法
2017-11-12更新 安装搜狗拼音: http://blog.csdn.net/iamplane/article/details/70447517 ------------------------ ...
- tableview 与 tableview cell
1.tableview cell: import Foundationimport UIKit class CjwtCell: UITableViewCell { @IBOutlet var lb_c ...
- 常用vim编辑器命令行
按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w! 强制保存,不推出vi:wq 保存文件并退出vi:wq! 强制保存文件,并退出v ...
- cocos2dx场景切换的坑
有一个类可以使用不同的数据源,每个数据源对应一个对象. 我在类里保存了对象的实例,由于要在其它地方使用所以做成了静态,并在每次初始化时 重新设置,析构时删除. 现在我打开了A,切换到B,结果这个静态的 ...