Vue打折源码是一份基于Vue框架编写的简单易懂的电商打折应用程序。该程序可以通过Vue组件、Vue指令以及Vue过滤器等方式完成打折功能。

在Vue打折源码中，通过Vue指令v-bind:class和v-bind:style来渲染对应的样式和类名：

<ul>
  <li v-for="item in items"
      v-bind:key="item.id"
      v-bind:class="{ 'saleItem': item.sale }"
      v-bind:style="{ 'color': item.color }">
    {{ item.name }}
  </li>
</ul>

其中，v-bind:class中的saleItem是自定义的样式名，当item.sale为true时该样式会被应用到该li元素中；v-bind:style中的color同样也是自定义的样式属性名，当item.color存在时该样式会被应用到该li元素中。

除了通过Vue指令来渲染样式和类名外，Vue打折源码也使用了过滤器filter来完成打折功能：

Vue.filter('discount', function (price, rate) {
  return '¥' + (price * rate / 10).toFixed(2);
});

该过滤器接收两个参数：price表示商品原价，rate表示打折力度（例如8折就是80），并返回折后价。使用方法如下：

{{ item.price | discount(item.sale) }}

其中，item.price表示商品原价，item.sale表示该商品是否打折，discount是Vue.filter方法注册的过滤器名。

综上，Vue打折源码通过Vue指令、过滤器等方式实现了简单的电商打折功能，该源码可供学习参考。