VueJS中如何实现：应用discount过滤器时为父元素添加类名？

当然可以实现这个需求！不过得先说明：Vue的过滤器只是用来格式化数据的，它本身没办法直接关联DOM元素的操作（比如给父元素加类）。所以我们需要换几种思路来达成目标，下面给你几个实用的方案：

方案1：自定义指令（直接操作DOM的方式） #

自定义指令可以让我们直接操作元素及其父元素，同时完成折扣计算和类名添加：

HTML代码 #

<div id="app">
  <h3>50% Discount =)</h3>
  <ul>
    <li v-for="product in products">
      {{ product.name }} - <span v-discount="product.price"></span>
    </li>
  </ul>
</div>

JS代码 #

// 自定义v-discount指令
Vue.directive('discount', {
  bind(el, binding) {
    // 计算折扣后价格
    const discounted = binding.value * 0.5;
    // 设置span的文本内容
    el.textContent = discounted;
    // 给当前span元素添加color-green类（如果需要给span的父元素加类，就用el.parentElement.classList.add('color-green')）
    el.classList.add('color-green');
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      products: [
        { name: 'T-Shirt', price: 40 },
        { name: 'Shoes', price: 120 }
      ]
    };
  }
});

方案2：计算属性 + 动态类绑定（更符合Vue响应式思想） #

如果你的折扣逻辑需要根据数据动态调整（比如部分产品打折，部分不打），用方法配合动态类会更灵活：

HTML代码 #

<div id="app">
  <h3>50% Discount =)</h3>
  <ul>
    <li v-for="product in products">
      {{ product.name }} - 
      <!-- 动态绑定类：只要产品应用折扣就加color-green -->
      <span :class="{ 'color-green': product.isDiscounted }">
        {{ getDiscountedPrice(product) }}
      </span>
    </li>
  </ul>
</div>

JS代码 #

new Vue({
  el: '#app',
  data() {
    return {
      products: [
        { name: 'T-Shirt', price: 40, isDiscounted: true },
        { name: 'Shoes', price: 120, isDiscounted: true },
        { name: 'Hat', price: 25, isDiscounted: false }
      ]
    };
  },
  methods: {
    getDiscountedPrice(product) {
      return product.isDiscounted ? product.price * 0.5 : product.price;
    }
  }
});

方案3：封装成组件（高复用性首选） #

如果这个带折扣的价格展示会在项目多个地方用到，封装成独立组件是最优解：

HTML代码 #

<div id="app">
  <h3>50% Discount =)</h3>
  <ul>
    <li v-for="product in products">
      {{ product.name }} - <discounted-price :price="product.price"></discounted-price>
    </li>
  </ul>
</div>

JS代码 #

// 注册全局组件
Vue.component('discounted-price', {
  props: ['price'],
  // 组件模板里直接给span加上color-green类
  template: '<span class="color-green">{{ price * 0.5 }}</span>'
});

new Vue({
  el: '#app',
  data() {
    return {
      products: [
        { name: 'T-Shirt', price: 40 },
        { name: 'Shoes', price: 120 }
      ]
    };
  }
});

总结一下：过滤器本身做不到给父元素加类，但通过自定义指令、动态类绑定或者组件封装，完全可以轻松实现你的需求。根据你的项目场景选最合适的方案就好～

内容的提问来源于stack exchange，提问作者Johnson