Can you apply this filter rule in VueJS?
If an element has the filter
discount, the parent will be styled with the classcolor-green(in this case, the span tag)
Check out my JSFIDDLE for more details :)
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;
}