vue2.0学习DEMO (购物车与地址切换)

最新推荐文章于 2023-05-31 22:12:43 发布

原创

最新推荐文章于 2023-05-31 22:12:43 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue2.0

本文介绍了使用Vue2.0进行购物车功能和地址切换功能的实现。购物车部分展示了页面代码和js/cart.js的内容，通过调用/Vue2.5.17/carData.php获取数据。地址切换部分包括html结构和js/address.js的说明，数据来源于/Vue2.5.17/addressData.php。

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

购物车

页面代码（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script type="application/javascript" src="js/jq.js"></script>
    <script type="application/javascript" src="vue.js"></script>
    <style>
        .goods_img{
            width:15%;
            height:15%;
        }
        ol li{
            margin-bottom:15px;
        }
        .number{
            color:red;
        }
        .myinput{
            width:30px;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>购物车列表</h3>
    <hr/>
    <ol>
        <li v-for="(item,index) in productList">
            <input type="checkbox" v-model="item.checked" @click="selOne(item)"/>　　
            图标：<img class="goods_img" :src="item.productImage"/>　　　
            名称：<span>{
  
  {item.productName}}</span>　　　
            单价：<span class="number">{
  
  {item.productPrice | filterMoney}}</span>　　　
            数量：<button @click="diJian(item)">-</button>
            <input class="myinput" type="text" v-model="item.productQuentity"/>
            <button @click="item.productQuentity+=1">+</button>　　　
            合计：<span class="number">{
  
  {item.productPrice*item.productQuentity|filterMoney}}</span>　　
            <button @click="deleteOne(index)">删除</button>
        </li>
    </ol>
    <hr/>
    　　<input type="checkbox" v-model="selALLFlag" @click="selALL(true)"/>　全选　　　
        <button @click="selALL(false)">　取消全选　</button>　　
        <button @click="deleteSel">　批量删除　</button>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
        总费用:<span class=