VueJS添加类是否具有过滤器

Question

Is there a way to do this filter rule in VueJS?

If some element has the filter discount , the parent will receive the class color-green (in this case the tag span)

I made a JSFIDDLE :)

HTML

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

JS

Vue.filter('discount', function (value) {
  return  value * 0.5;
})

new Vue({
    el: '#app',
  data: {
    products: [
      {name: 'Angular', price: 75},
      {name: 'VueJS', price: 60},
      {name: 'React', price: 40}
    ]
  }
})

CSS

.color-green{
  color: green;
}

Answer 1

But in your case every element has a discount isn't it?

Filter is not something you want to check. Filter is just a way to transform some input to some output.

Discount info should be defined inside your products data. And then you can make something like this:

 Vue.filter('discount', function (value) { return value * 0.5; }) new Vue({ el: '#app', data: { products: [ {name: 'Angular', price: 75, discount: 0.3}, {name: 'VueJS', price: 60}, {name: 'React', price: 40, discount: 0.7} ] } }) 

 .color-green{ color: green; } .product-price--discounted { text-decoration: line-through; } 

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <div id="app"> <h3>Products</h3> <ul> <li v-for="product in products"> {{ product.name }} - <span :class="product.discount && 'product-price--discounted'">{{ product.price }}</span> <span v-if="product.discount" class="color-green"> {{ product.price - product.price * product.discount}} </span> </li> </ul> <h3>All elements has discount:</h3> <ul> <li v-for="product in products"> {{ product.name }} - <span class='color-green'>{{ product.price | discount }}</span> </li> </ul> </div>