zoukankan      html  css  js  c++  java
  • 简单的购物车商品价格计算

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <style>

    </style>
    </head>
    <body>
    <div id="app">
    <div class="li">商品价格:<input placeholder="输入产品价格" type="number" v-model="value" /></div>
    <div class="li">
    商品数量:<input value="-" type="button" @click="minusNum" /> <span class="num">{{number}}</span> <input value="+" type="button" @click="increaseNum" />
    </div>
    <div class="li">
    总价格:<span class="price">{{allPrice}}</span>
    </div>
    </div>
    <script>
    var vm = new Vue({
    el:'#app',
    data:{
    value:"0",
    number:"0",
    price:"0"
    },
    computed:{
    allPrice:function(){
    return this.price = this.number * this.value;
    }
    },
    methods:{
    minusNum:function(){
    if(this.number>0){
    this.number --;
    }
    else{
    this.number = 0;
    alert("不能更少了")
    }

    },
    increaseNum:function(){
    this.number ++;
    }
    }
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    BZOJ3631 [JLOI2014] 松鼠的新家
    HDU
    HDU
    HDU
    二分图求最大独立集模板
    HDU
    HDU
    HDU
    Codeforces 1197F Coloring Game 矩阵快速幂 (看题解)
    HDU
  • 原文地址:https://www.cnblogs.com/wss198909/p/13952890.html
Copyright © 2011-2022 走看看