vue 如何实现 找到好多li标签中的某一个?

现在试着做一个日期选择器,当我点击input框弹出日期选择面板时,当天日期应该是默认选中的,即给这一天的dom加一个active的class。

按照以前jquery的思路,我给每天的dom加一个data-day='20170101'属性,然后使用$('li[data-day=20170101]')这样就能找到这个元素。

可是在vue中我应该从哪个方向去思考?应该怎么做?就是不通过元素查找的方式,而是通过比如computed之类的方法来改变状态什么的来实现

阅读 5.2k
3 个回答

代码应该如下(大概的示例):

<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>
<li
  :class="date === today ? 'active' : ''"
>{{ date }}</li>

自定义指令?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题