Vue解决购物车

最新推荐文章于 2024-07-26 15:28:27 发布

Ghost_02

最新推荐文章于 2024-07-26 15:28:27 发布

阅读量802

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/Ghost_leader/article/details/82527423

版权

本文介绍了如何使用Vue来解决购物车问题，探讨了Vue的基础指令如v-model、v-text、v-show、v-if、v-bind、v-for和v-on的用法，并提到了过滤器Filter和组件Component在实现购物车功能中的应用。通过实例代码，展示了在index.html和cert.js中的实现细节，并提供了参考链接。

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

Vue 易用，灵活，高效。

<div id="app">
    {
  { message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

这就是一个最简单的Vue。

灵活-渐进式。

Vue 的基础指令介绍：

指令使用 v-model v-text v-show v-if v-bind v-for v-on

v-model 的主要应用场景是表单输入双向绑定。

v-text 文本渲染等同于 { { }} ,

v-show dom的显示和隐藏

v-if 判断

v-bind 给dom元素绑定属性。

v-for 循环

v-on 事件绑定

过滤器Filter

组件 Component

类似django，beego 的template的复用

下面是购物车代码

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta content="IE=dege,chrom=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <title>Cart</title>
    <link href="css/base.css" rel="stylesheet">
    <link href="css/checkout.css" rel="stylesheet">
    <link href="css/modal.css" rel="stylesheet">
    <style type="text/css">
        .quentity input {
            width: 40px;
            padding: 5px 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="checkout">
      <div id="app">

        <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
            <symbol id="icon-add" viewBox="0 0 32 32">
              <title>add2</title>
              <path class="path1" d="M15 17h-13.664c-0.554 0-1.002-0.446-1.002-1 0-0.552 0.452-1 1.002-1h13.664v-13.664c0-0.554 0.446-1.002 1-1.002 0.552 0 1 0.452 1 1.002v13.664h13.664c0.554 0 1.002 0.446 1.002 1 0 0.552-0.452 1-1.002 1h-13.664v13.664c0 0.554-0.446 1.002-1 1.002-0.552 0-1-0.452-1-1.002v-13.664z"></path>
            </symbol>
            <symbol id="icon-ok" viewBox="0 0 39 32">
              <title>ok</title>
              <path class="path1" d="M14.084 20.656l-7.845-9.282c-1.288-1.482-3.534-1.639-5.016-0.351s-1.639 3.534-0.351 5.016l10.697 12.306c1.451 1.669 4.057 1.623 5.448-0.096l18.168-22.456c1.235-1.527 0.999-3.765-0.528-5.001s-3.765-0.999-5.001 0.528l-15.573 19.337z"></path>