背景:
做项目老是遇到这个需求,但是每次都会想不起来,就去百度查,然后查到又不是我想要的答案,所以本次就记录下来以后能方便查看。
1.效果展示:
2.需求分析:
。。。实现上图所示。。。
3.思路设计:
对于array遍历展示,我相信很多人都会使用v-for去实现,那么如何要让程序知道你点中了哪个li节点呢?
这个放在jquery是很容易实现的,但是我们不需要用jquery。在Vue中动态改变节点我们喜欢用:class和ref,好,把ref扔一边,我们讲class实现,:class可以接收到变量,,能从v-for中获取到的有value,key,index,那么就可以
<li v-for="(item, i) in list" :key="i" :class="'list_'+i">{{item}}</li>
这样子实现不同的li对应有唯一的class,然后我们实现点击事件:
<li v-for="(item, i) in list" :key="i" :class="'list_'+i" @click="clickItem(i)">{{item}}</li>
然后拿到值后就拼装值,当然你也可以直接传"'list_'+i"
过去,这个看个人,
clickItem拿到值后就能用js获取dom,通过dom的style控制样式改变,
然后我们需要判断用户点击了哪个li节点,好的,看源码实现。
4.源码实现:
<template>
<div class="body">
<ul>
<li v-for="(item, i) in list" :key="i" :class="'list_'+i" @click="clickItem(i)">
{{item}}
</li>
</ul>
点击了第{{index}}, 数值为{{list[index]}}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
list:['全部','大陆','香港','台湾','美国',
'法国','英国','日本','韩国','德国','泰国',
'印度','意大利','西班牙','加拿大','其他'],
index:0
}
},
methods:{
clickItem(idx){
var obj = null
var len = this.list.length
this.index = idx
for(var i=0;i<len;i++){
if(i == idx){
document.getElementsByClassName("list_"+i)[0].style.backgroundColor = "yellow"
}else{
document.getElementsByClassName("list_"+i)[0].style.backgroundColor = ""
}
}
}
},
mounted(){
this.clickItem(this.index)
}
}
</script>
<style scoped lang="less">
.body{
padding: 0;
margin: 0;
ul{
list-style: none;
padding: 0;
margin: 0;
background: pink;
width: 1200px;
height: 300px;
li{
float: left;
margin-left: 15px;
}
li:hover{
cursor: pointer;
}
}
}
</style>
5.测试结果:
6.关于说明:
1.实现方法有很多,本示例只提供js实现思路
2.后期如果有需要用到其他方式实现,会进行更新
3.转载请说明出处!!!
点赞收藏