vue购物车

最新推荐文章于 2020-07-31 16:58:22 发布

原创

最新推荐文章于 2020-07-31 16:58:22 发布 · 610 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Vue购物车

本文介绍了使用Vue.js创建购物车的实现，包括商品数量的增减、总价动态计算及商品移除功能。利用了Vue的computed计算属性、v-for、v-on和v-bind指令，以及click事件和disabled属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

购物车

这里用vue做了一个购物车计算，功能：加减商品，商品总价根据数量发生变化；移除商品，商品总价等于剩余存在购物车的商品。
用到了Vue的computed的计算属性，v-for指令，v-on(@)指令，v-bind(:)指令，click事件，disabled表单属性。

页面

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
<table border="1" v-cloak>
    <tr bgcolor="#b0e0e6">
        <td>&nbsp;</td>
        <td>商品名称</td>
        <td>商品单价</td>
        <td>购买数量</td>
        <td>操作</td>
    </tr>
    <tr bgcolor="#faebd7" v-for="(product,index) in products">
        <td>{
  
  { index+1 }}</td>