时间:2021-05-18
在正常的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这个类名。说的很简练,不懂的可以加博主一起探讨
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了Vue2.0实现单选互斥的方法,分享给大家,具体如下:需要实现如上图的功能1.首次加载页面,根据data里的catgoryId高亮对应的选项2.点击某
本文实例讲述了vue2.0实现的tab标签切换效果。分享给大家供大家参考,具体如下:这里利用vue2.0实现tab标签切换效果比较实用初学vue,练习写了一个d
本文实例讲述了Vue2.0实现组件之间数据交互和通信操作。分享给大家供大家参考,具体如下:Vue2.0组件之间数据交互和通信。Vue2.0废弃了dispatch
目标使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗实现Document点击我弹窗哈哈哈Vue.directive('popup',{
1、说明运用技术:Vue2.0、Vux、vux-loader、vue-cli、vue-router、vuex2、效果图3、实现流程3.1搭建框架(需要安装好no