多平台统一管理软件接口,如何实现多平台统一管理软件接口
326
2023-02-08
用vue2.0实现点击选中active其他选项互斥的效果
在正常的js中。我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示楼主用的是jq):
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
width: 100px;
margin-top: 1http://0px;
border: 1px solid red;
}
li:active {
cursor: pointer;
}
.active {
background-color: aqua;
}
</style>
$(() => {
$("li").click((e) => {
$("li").removeClass("active");
$(e.target).addClass("active");
})
})
SPoJFAmNn
效果如下图所示:
但是在vue里面,是不提倡进行dom操作的,如果非进行dom的话,vue2.0里面有一个ref的属性,是可以达到dom的效果的。那么接下来我们不接住dom来进行操作:
由于习惯了webpack和vue-cli脚手架,所以楼主所有vue的代码都是放在webpack的脚手架当中进行,还使用了pug和scss的预处理器,vue的代码如下:
ul
li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}}
li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
&:hover {
cursor: pointer;
}
}
.active{
background-color: aqua;
}
exporthttp:// default{
data(){
return {
classArr: ["one", "two", "three"],
num:"",
}
},
methods: {
result(index){
this.num = index;
}
},
computed:{
resultNum(){
return this.num;
}
}
}
思路如下:
这段代码使用的是index这个关键字,还使用了computed这个计算属性,当当前的index索引与点击的当前元素的下标相同的时候,便会触发active这个类名。说的很简练,不懂的可以加博主一起探讨
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~