小试牛刀之vue入门小例子-----购物车 -

行走的胖胖

浏览: 1739 次
性别:
来自: 河南

最近访客更多访客>>

羊肉小笼包

姐的拽-你不懂

PgGAI

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

小试牛刀之vue入门小例子-----购物车

博客分类：

vue 购物车 web前端入门小例子

话说vue出来之后好像很火的样子,减少了代码量,直接操作数据,还不操纵很繁重的DOM,写完直接打包扔给后台,你想怎么办就怎么办吧!总之来说就是现阶段很火的技术.程度你懂得

vue是什么呢?vue是现在很火的一个前端MVVM框架，它以数据驱动和组件化的思想构建，与angular和react并称前端三大框架。相比angular和react，vue更加轻巧、高性能、也很容易上手。这些都是官方的说法,再核心的或者api直接去vue官网look look吧.那就话不多说,直接上代码,亲测,暂时没问题(友情提示:用的vue版本是2.x.x)

下面就直接来代码吧!最实在...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>购物车</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
  <script type="text/javascript" src="js/vue.js"></script>
  <style type="text/css" media="screen">
  a,p,span{
    cursor: pointer;
  }
  a:visited,a:hover{
    text-decoration: none;
  }
  .check{
    width: 20px;
    height: 19px;
    display: inline-block;
    vertical-align: bottom;
    background: url("img/check.jpg");
  }
  .isCheck{
    background: url("img/checked.png")
  }
  .input_pro{
    width: 30px;
  }
  .pro a{
    width: 20px;
    height:26px;
    display: inline-block;
    border:1px solid #ccc;
    text-align: center;
    vertical-align: bottom;
  }
  .footer p{
    float: right;
    margin-left: 10px;
  }
  .footer span{
    margin-left: 10px;
  }

  </style>
</head>
<body>
<div id="app">
  <h4>购物清单</h4>
  <table class="table">
    <thead>
      <tr>
        <th><span class="check" :class="{'isCheck':isSelectAll}" @click="selectProduct(isSelectAll)"></span> 全选</th>
        <th>商品详情</th>
        <th>数量</th>
        <th>单价(元)</th>
        <th>金额(元)</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in productList">
        <td><span class="check" @click="item.select=!item.select" :class="{'isCheck':item.select}"></span></td>
        <td>{{item.pro_name}}</td>
        <td class="pro"><a href="javascript:;" @click="item.pro_num--">－</a><input type="text" class="input_pro" v-model="item.pro_num"><a href="javascript:;" @click="item.pro_num++">＋</a></td>
        <td>￥{{item.pro_price}}.00</td>
        <td>￥{{item.pro_price*item.pro_num}}.00</td>
        <td><button type="button" @click="removePro(index)">删除</button></td>
      </tr>
    </tbody>
  </table>
  <div class="footer">
    <span><a href="javascript:;" title="" @click="deletePro">删除所选商品</a></span>
    <span>继续购物</span>
    <p><a href="javascript:;" class="">去结算</a></p>
    <p>￥<span>{{getTotal.totalPrice}}</span></p>
    <p><span>{{getTotal.totalNum}}</span>件商品总计(不含运费):</p>
  </div>
</div>
<script type="text/javascript">
  new Vue({
    el:"#app",
    data:{
      productList:[
      {
        'pro_name':'项链',
        'pro_num':1,
        'pro_price':4000
      },
      {
        'pro_name':'手镯',
        'pro_num':1,
        'pro_price':2000
      },
      {
        'pro_name':'戒指',
        'pro_num':1,
        'pro_price':8000
      },
      {
        'pro_name':'耳坠',
        'pro_num':1,
        'pro_price':1000
      }
      ]
    },
    methods:{
      //全选与取消全选
      selectProduct:function(_isSelect){
        for(var i=0;i<this.productList.length;i++){
          this.productList[i].select = !_isSelect;
        }
      },
      //删除单条
      removePro:function(index){
        this.productList.splice(index,1)
      },
      //删除选中的
      deletePro:function(){
        this.productList=this.productList.filter(function(item){return !item.select})
      }
    },
    mounted:function(){
      var _this=this;
      //为productList添加select(是否选中)字段
      this.productList.map(function(item){
        _this.$set(item,'select',false);
      })
    },
   computed:{
    //检测全选
     isSelectAll:function(){
        return this.productList.every(function (val) { return val.select});
    },
    //获取总件数和价格
    getTotal:function(){
      //获取select为true的数据
      var _proList=this.productList.filter(function(val){return val.select }),totalPrice=0;
      for(var i=0;i<_proList.length;i++){
        totalPrice+=_proList[i].pro_num*_proList[i].pro_price;
      }
      return {totalNum:_proList.length,totalPrice:totalPrice}
    }

   }
  })
</script>
</body>
</html>

效果图如下:

好吧!简单粗暴,此例子先到这里吧!嘿嘿,有错误及时call me 哦!