Vue.js(一到五总结)-小Demo-购物车

如果看完了Vue.js入门1-5,就可以很容易的理解这个小Demo,这个Demo我们来模拟一个购物车。1.首先,我们写一个Demo需要把准备工作做好1.1创建三个文件index.html(引入资源以及模板)index.js(Vue实例以及业务代码)style.css(css样式)如下图:1.2在index.html中引入vue.js的相关资源和js,这里我就不上...

LL_亚亚帅

3333人浏览 · 2018-08-15 12:21:04

LL_亚亚帅 · 2018-08-15 12:21:04 发布

如果看完了Vue.js入门1-5,就可以很容易的理解这个小Demo,这个Demo我们来模拟一个购物车。

1.首先,我们写一个Demo需要把准备工作做好

1.1创建三个文件

index.html(引入资源以及模板)
index.js(Vue实例以及业务代码)
style.css(css样式)
如下图:
这里写图片描述

1.2在index.html中引入vue.js的相关资源和js,这里我就不上图片了,直接把代码粘过来

<html>
    <head>
        <title>购物车小Demo</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="app" v-cloak>

        </div>
         <!--引入vue-->
       <script src="https://cdn.jsdelivr.net/npm/vue"></script>
       <!--引入JS-->
       <script src="index.js"></script>
     </body>
</html>

这里需要注意的是要将引入的js和vue写在<body>的最底部,如果写在<head>里面,vue的实例就无法创建了!!!
这样准备工作就做好了,接下来就该实例化vue了。

2.初始化Vue实例

2.1在index.js中编写代码:

var app = new Vue({
el:'#app',
data:{

},
computed:{

},
methods:{

}
})

3.添加商品

3.1在index.js中的data方法中添加商品

list:[
            {
                id:1,
                name:'iPhone10',
                price:'6666',
                count:1
            },
            {
                id:2,
                name:'oppo',
                price:'4444',
                count:1
            },
            {
                id:3,
                name:'笔记本',
                price:'88888',
                count:1
            },
            {
                id:4,
                name:'充电器',
                price:'88',
                count:1
            },
            {
                id:5,
                name:'手机壳',
                price:'18',
                count:1
            },

        ]

4.在index.html中完成表格的大体框架

<div id="app" v-cloak>
   <template v-if="list.length">
       <table>
          <thead>
             <tr>
               <th></th>
               <th>商品名称</th>
               <th>商品单价</th>
               <th>购买数量</th>
               <th>操作</th>
             </tr>
           </thead>
        <tbody>

        </tbody>
      </table>
          <div>总价: ¥ {{totalPrice}} 元</div>
     </template>
          <div v-else>购物车为空</div>
</div>

5.因为价钱在千分位都需要”,”隔开,所以我们在index.js的computed选项内写入;

 computed:{
        totalPrice:function(){
            var total = 0;
            for (var i = 0; i < this.list.length; i++) {
                var item = this.list[i];
                total += item.price * item.count;
            }
            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
        }

    },

6.在index.html的中展示数据

 <tbody>
    <tr v-for="(item,index) in list">
       <td>{{index+1}}</td>
       <td>{{item.name}}</td>
       <td>{{item.price}}</td>
       <td>
          <button @click="handleReduce(index)":disabled="item.count===1">-</button>
                 {{item.count}}
          <button @click="handleAdd(index)">+</button>
       </td>
       <td>
          <button @click="handleRemove(index)">移除</button>
       </td>
     </tr>
</tbody>
/*
其中handleReduce是减少的方法,handleAdd是增加的方法,handleRemove是移除的方法
*/

7.在index.js中完成这三个方法

methods:{
        handleReduce:function(index){
           if (this.list[index].count === 1) {
               return;
            }
            this.list[index].count--;
        },
        handleAdd:function(index){
            this.list[index].count++;
        },
        handleRemove:function(index){
            this.list.splice(index,1);
        }
    }

8.这样就完成了这个demo,是不是很简单,对了还有css没给大家.

index.hteml完整代码:

<html>
    <head>
        <title>购物车小Demo</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>
    <div id="app" v-cloak>
        <template v-if="list.length">
           <table>
               <thead>
                  <tr>
                      <th></th>
                      <th>商品名称</th>
                      <th>商品单价</th>
                      <th>购买数量</th>
                      <th>操作</th>
                  </tr>
                </thead>
       <tbody>
          <tr v-for="(item,index) in list">
              <td>{{index+1}}</td>
              <td>{{item.name}}</td>
              <td>{{item.price}}</td>
              <td>
                  <button @click="handleReduce(index)":disabled="item.count===1">-</button>
                                {{item.count}}
                  <button @click="handleAdd(index)">+</button>
               </td>
               <td>
                  <button @click="handleRemove(index)">移除</button>
               </td>
           </tr>
        </tbody>
     </table>
        <div>总价: ¥ {{totalPrice}} 元</div>
            </template>
            <div v-else>购物车为空</div>
        </div>
        <!--引入vue-->
       <script src="https://cdn.jsdelivr.net/npm/vue"></script>
       <!--引入JS-->
       <script src="index.js"></script>        
  </body>
</html>

index.js完整代码:
//初始化实例
var app = new Vue({
    el:'#app',
    data:{
        list:[
            {
                id:1,
                name:'iPhone10',
                price:'6666',
                count:1
            },
            {
                id:2,
                name:'oppo',
                price:'4444',
                count:1
            },
            {
                id:3,
                name:'笔记本',
                price:'88888',
                count:1
            },
            {  
                id:4,
                name:'充电器',
                price:'88',
                count:1
            },
            {
                id:5,
                name:'手机壳',
                price:'18',
                count:1
            }
        ]

    },
    computed:{
        totalPrice:function(){
            var total = 0;
            for (var i = 0; i < this.list.length; i++) {
                var item = this.list[i];
                total += item.price * item.count;
            }
            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
        }

    },
    methods:{
        handleReduce:function(index){
            if (this.list[index].count === 1) {
                return;
            }
            this.list[index].count--;
        },
        handleAdd:function(index){
            this.list[index].count++;
        },
        handleRemove:function(index){
            this.list.splice(index,1);
        }
    }
})

style.css完整代码:
[v-cloak]{
    display:none;
}
table{
    border:1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}
th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
}

最终的效果图:

这里写图片描述

可以加可以减可以移除,总价会随着商品的变化而变化!

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^