Vue 购物车案例

本篇描述 vue实现购物车小案例,有兴趣的小伙伴可以参考一下,小编用了两种方法实现 字符串拼接和过滤器,主要体现在price上

  • 样式代码

  • 方式一 html代码部分

    

购物车

// 循环渲染数据
书籍名称 出版日期 价格 购买数量 操作
{{k.id}} {{k.name}} {{k.time}} ¥{{k.price}} {{k.count}}

总价格:¥ {{totalPrice}}

购物车为空

  • 方式一 vue部分


  • 使用自定义过滤器 代码如下
html代码部分:

    

购物车

// 循环渲染数据
书籍名称 出版日期 价格 购买数量 操作
{{k.id}} {{k.name}} {{k.time}} // 过滤器管道 {{k.price | showPrice}} {{k.count}}

总价格:{{totalPrice | showPrice}}}

购物车为空

vue 代码部分



  • 效果图如下
    Vue 购物车案例_第1张图片
    Vue 购物车案例_第2张图片

你可能感兴趣的:(vue,vue.js,前端)