javascript - vue 如何实现 找到好多li标签中的某一个?
本文介绍了javascript - vue 如何实现 找到好多li标签中的某一个?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
现在试着做一个日期选择器,当我点击input框弹出日期选择面板时,当天日期应该是默认选中的,即给这一天的dom加一个active的class。
按照以前jquery的思路,我给每天的dom加一个data-day='20170101'
属性,然后使用$('li[data-day=20170101]')
这样就能找到这个元素。
可是在vue中我应该从哪个方向去思考?应该怎么做?就是不通过元素查找的方式,而是通过比如computed
之类的方法来改变状态什么的来实现
解决方案
代码应该如下(大概的示例):
<script>
export default {
data () {
return {
tody: TODAY,
days: [/*数据在这里*/],
activeIndex: null
}
},
methods: {
select (index) {
this.activeIndex = index
}
}
}
</script>
<template>
<ul>
<li v-for="(day, index) in days"
@click="select(index)"
:class="{active: index === activeIndex, today: day === today}">
{{day}}
</li>
</ul>
<template>
这篇关于javascript - vue 如何实现 找到好多li标签中的某一个?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文