Vue 点击对应的元素改变class

最新推荐文章于 2024-02-28 16:43:21 发布

原创最新推荐文章于 2024-02-28 16:43:21 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种基于Vue.js的价格筛选器实现方式，通过点击不同价格范围的按钮来更新当前选中的价格区间，实现商品列表的动态价格过滤。文章详细解释了如何使用v-on和v-bind指令来控制DOM元素的动态行为和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        <div class="filter stopPop" id="filter">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd v-on:click.stop="priceChecked = 'all'">
                <a href="javascript:void(0)" v-bind:class="{'cur': priceChecked === 'all'}">All</a>
              </dd>
              <dd  v-for="(price, index) in priceFilter" v-on:click.stop="priceChecked = index">
                <a href="javascript:void(0)"
                   v-bind:class="{'cur': priceChecked === index}"
                >{{price.startPrice}} - {{price.endPrice}}</a>
              </dd>
            </dl>
          </div>