用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的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
随机推荐
- C#中Out和Ref參数修饰符
在编程过程中对于函数之间的參数的传递一般分为两种:传值和传地址. 以下为大家分析一下. 传值 比方你又一份文档,假设採用传值的话.相当于我复制了一份,因此我对我这份文档的改动都不会影响到你的那份.假设 ...
- C# AutoResetEvent
文章转载自:C# AutoResetEvent AutoResetEvent 常常被用来在两个线程之间进行信号发送 AutoResetEvent是.net线程简易同步方法中的一种,两个线程共享相同的A ...
- ajax异步请求，session失效处理
后台拦截器代码: // 判断是否是AJAX请求 if (isAjaxRequest(request)) { log.info("AjaxRequest请求"); ActionCon ...
- unity, StartCoroutine and StopCoroutine
startCoroutine("func",1.0f)可以用stopCoroutine("func")来停. startCoroutine(func(1.0f) ...
- MSSQL如何访问ORACLE里的表
环境: MSSQL:2008 ORACLE DB:10.2.0.1 之前一直没有接触MSSQL,最近因需要MSSQL访问ORACLE里的表,下面是MSSQL连接ORACLE的配置过程. 1 ...
- android.graphics(2) - Path, drawPath, moveTo, lineTo, addRect, addCircle, addOval, addArc, drawText, drawTextOnPath
一.创建路径 canvas中绘制路径利用: void drawPath (Path path, Paint paint) 1.直线路径 void moveTo (float x1, float y1) ...
- Spring学习10-SpringMVC入门
二.SpringMVC请求处理流程 其中Front controller :前端控制器 Controller:后端控制器 三.Spring核心组件及请求处理流程
- nyoj746 整数划分(四)
整数划分(四) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 暑假来了,hrdv 又要留学校在参加ACM集训了,集训的生活非常Happy(ps:你懂得),可是他最近遇到 ...
- C++-教程2-VS2010C++相关文件说明
stdafx.h说明:stdafx的英文全称为:Standard Application Framework Extensions(标准应用程序框架的扩展).所谓头文件预编译,就是把一个工程(Proj ...
- lua工具库penlight--03字符串
字符串提取函数 这些方法也是从Python借鉴来的,但索引从1开始.stringx定义了一些函数如isalpha和isdigit, 用来判断字母和数字:startswith和endswith可以方便用 ...