vue--购物车+计算价格+自定义过滤器

html>html lang="en">head>meta charset="UTF-8">title>Titletitle>link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">script src="http://apps.bdimg.com

郭浩326

4494人浏览 · 2017-06-02 17:35:00

郭浩326 · 2017-06-02 17:35:00 发布

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="js/vue.js"></script>
  <style>
    .box{
      width: 1000px;
      margin: auto;
      margin-top: 100px;
    }
  </style>
</head>
<body>
<div class="box" id="app">
  <h3>这里是<b>{{name}}</b>的购物车</h3>

  <div>
    <span>输入关键字</span>
    <input type="text" v-model="key">
  </div>

  <table class="table table-hover table-striped">
    <tr>
      <th>商品编号</th>
      <th>商品名称</th>
      <th>商品单价</th>
      <th>商品数量</th>
      <th>小计金额</th>
      <th>删除</th>
    </tr>
    <tr v-for="(b,index) in filterGoodses" class="warning">
      <td>{{index}}</td>
      <td>{{b.goodsName}}</td>
      <td>{{b.price}}</td>
      <td><input type="text" v-model="b.number"></td>
      <td>{{b.price*b.number}}</td>
      <td><button class="btn" v-on:click="dele(index)">删除</button></td>
    </tr>
  </table>
  <div>总价为<span>{{moneyall}}</span></div>
</div>
</body>
<script>
  var app=new Vue({
    el:"#app",
    data:{
      money:"",
      name:"鸣欣凤凰",
      goodses:[
        {id:1,goodsName:"JavaScript从入门的放弃",price:25.5,number:1},
        {id:2,goodsName:"Java从入门的吐血",price:12,number:1},
        {id:3,goodsName:"PHP是世界上最好语言",price:18,number:1},
        {id:4,goodsName:"mysql从入门到删库",price:21,number:1},
        {id:5,goodsName:"Html从入门到精通",price:9,number:1}
      ],
      key:""//创建一个空的
    },
    methods:{   //删除信息
      dele:function(index){
        /*
         *confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
         * 如果用户点击确定按钮，则 confirm() 返回 true。
         * 如果点击取消按钮，则 confirm() 返回 false。
         * 
         * 点击确定执行下一行代码           
         */
        if(confirm("确定要删除吗？")){
          this.goodses.splice(index,1);
        }
      }
    },
    computed:{ //计算总价
      moneyall:function(){
        var allp=0;
        for (var i=0;i<this.goodses.length;i++) {
          allp=allp+this.goodses[i].price*this.goodses[i].number;
        }
        return allp;
      },
      filterGoodses: function () {   // 过滤器
        var key = this.key;
        var goodses = this.goodses;
        return goodses.filter(function (goodses,goodsName) {
          return goodses.goodsName.toLowerCase().indexOf(key.toLowerCase()) != -1
          /*
           *indexOf() 方法对大小写敏感！
           * 如果要检索的字符串值没有出现，则该方法返回 -1
           * 
           * toLowerCase() 方法用于把字符串转换为小写。
           * */

        })
      }

    }
  });


</script>
</html>

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}$/, //不连续的两位字母// /^