利用vue.js写一个购物车结算

最新推荐文章于 2023-12-21 22:30:00 发布

咤克斯咤克斯

最新推荐文章于 2023-12-21 22:30:00 发布

阅读量2.1k

点赞数 5

分类专栏：前端文章标签： js vue 购物车前端开发新生

本文链接：https://blog.csdn.net/qq_43328498/article/details/84147467

版权

本文介绍了如何使用Vue.js来构建一个简单的购物车功能。首先通过搭建HTML结构并引入Vue.js库，接着利用Vue组件处理增加商品的操作，强调了Vue的数据绑定、事件处理和组件的使用。还提到了总价的计算，以及数据从组件传递到总价的实现。文章以作者从0开始学习Vue的心路历程为背景，提到前端项目的实践对于提升语言表达能力和反思问题的重要性。

摘要由CSDN通过智能技术生成

利用vue.js写一个购物车结算

笔者自学前端两个月了，之前什么轮播图，自动加载的功能，写了就忘了，还是太菜了。于是想开个博客来记录一下自己学习的历程。第一篇，献给这个购物车。大概下面那个效果把。在这里插入图片描述

先搭建一个html结构。~~第一个导入的js库即vue大家自己去下载哈~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript" src="vue.js"></script>
    <title>购物车，结算你的商品！</title>
</head>
<body>
<div id="el">
    <input type="text" placeholder="请输入商品名" class="text" v-model="commodity">
    <input type="text" placeholder="请输入单价" class="text" v-model="price">
    <a  class="submit" @click="add()">添加商品</a>
    <div id="table"><span class="span">商品名</span>
        <span class="span">单价（元/瓶）</span>
        <span class="span">数量</span>
        <span class="span">合计（元）</span>
    </div>

    <script type="text/javascript" src="js.js"></script>
</div>
</body>
</html>

css样式就不写了，然后我们就考虑到我们有一个增加商品的功能，一次增加四个值，这个可以用vue组件解决（注意js里return后面的第一个括号必须和return在一行，不然会返回undefined）
vue 可以实现数据的绑定，比起js的dom操作简单不少，我们通过vue来简便购物车的代码。
需要了解的语法：v-on即@ 触发事件
v-bind 即：绑定属性
v-model 绑定表单双向绑定
{ {}}双括号里面放的值是data里的属性名
还有v-for和组件相关语法，组件自己也不太懂呀，作为vue的最强大功能，传值复杂的不行，~~想到以后还要看vue源码，太苦了呀（哭）~~

<todo-item
            v-for="item in groceryList"
            v-bind:todo="item"

最低0.47元/天解锁文章

咤克斯咤克斯

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录