臨摹微笑
2018-10-12 11:10:58
現(xiàn)在試著做一個(gè)日期選擇器,當(dāng)我點(diǎn)擊input框彈出日期選擇面板時(shí),當(dāng)天日期應(yīng)該是默認(rèn)選中的,即給這一天的dom加一個(gè)active的class。按照以前jquery的思路,我給每天的dom加一個(gè)data-day='20170101'屬性,然后使用$('li[data-day=20170101]')這樣就能找到這個(gè)元素。可是在vue中我應(yīng)該從哪個(gè)方向去思考?應(yīng)該怎么做?就是不通過元素查找的方式,而是通過比如computed之類的方法來改變狀態(tài)什么的來實(shí)現(xiàn)
1 回答
牛魔王的故事
TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個(gè)贊
代碼應(yīng)該如下(大概的示例):
<script>
export default {
data () {
return {
tody: TODAY,
days: [/*數(shù)據(jù)在這里*/],
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>
添加回答
舉報(bào)
0/150
提交
取消
