HTML网页练习，Vue-邮购商品业务_邮购商品业务初始化界面-CSDN博客

本文链接：https://blog.csdn.net/qq_61986865/article/details/131023838

做出目标效果

话不多说

直接上代码

<!-- vue-ex-2-2.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>邮购商品业务</title>
    <!-- 1.引入vue.js -->
    <script src="vue.min.js" type="text/javascript"></script>
    <style type="text/css">
        table {
            border: 1px;
            border-collapse: collapse;
            border-color: #008000;
            width: 626px;
            text-align: center;
            margin: 0 auto;
        }

        input {
            width: 150px;
            height: 25px;
            border-radius: 4px;
        }

        tr {
            height: 30px;
        }

        fieldset {
            margin: 0 auto;
            padding: 10px;
            width: 600px;
            border: 1px double #008000;
        }
    </style>
</head>
<body>
<div id="vue-e-22">
    <div>
        <form>
            <fieldset id="">
                <legend align="center">邮购商品业务</legend>
                <!--//TODO: 完成表单数据绑定 理解v-model双向绑定的特点 -->
                客户姓名：<input type="text" v-model="name" key="name"/>
                单价：<input v-model='price' type="text" key="price"/><br>
                数量：<input v-model="count" type="text" key="count"/>
                购买价：<input type="text" v-model="total" key="total" readonly><br>
				运费：{{ freight }}
                总价：<input type="text" readonly v-model="sum" key="sum"><br>
                注：购买价>=100元免运费<br>
                <!-- //TODO: 完成click事件绑定 -->
                <input type="button" @click="add" value="记入流水">
                <input type="button" @click="clear" value="重置"/>
            </fieldset>
        </form>
    </div>

    <table border="1">
        <caption>销售流水帐</caption>
        <thead>
        <tr>
            <th>业务时间</th>
            <th>客户姓名</th>
            <th>购买价</th>
            <th>运费</th>
            <th>总金额</th>
        </thead>
        </tr>
        <tbody>
        <tr v-for="(item,index) in business">
            <!--使用了日期过滤器 -->
            <td>{{item.dateTime|dateFormat}}</td>
            <td>{{item.name}}</td>
            <td>{{item.totalAll}}</td>
            <td>{{item.freight}}</td>
            <td>{{item.sumTotal}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    // 定义了日期过滤器，格式化日期
	Vue.filter('dateFormat', function(date) {
		let dy = date.getFullYear();
		let dm = date.getMonth()+1<10?"0" + (date.getMonth() + 1) : date.getMonth() + 1;  //解决个位数前置0的问题，下同
		let dd = date.getDate();
		let dhs = date.getHours()<10?"0" + date.getHours() : date.getHours() ;
		let dms = date.getMinutes()<10?"0" + date.getMinutes() : date.getMinutes();
		let dss = date.getSeconds()<10?"0" + date.getSeconds() : date.getSeconds();

		return `${dy}年${dm}月${dd}日  ${dhs}:${dms}:${dss}`
	});
    var vm = new Vue({
        el: '#vue-e-22',
        data: {
            dateTime: '',
            name: '',
            price: '',
            count: '',
            freight: '',
            totalAll: '',
            sumTotal: '',
            business: [],
        },
        methods: {
            clear: function () {
                // TODO：完成清除输入域
                this.name = '';
                this.price = '';
                this.count = '';
                this.totalAll = '';
                this.sumTotal = '';
                this.dateTime = '';

            },
            add: function () {
                // TODO：：完成添加流水
                if (!this.name || !this.price || !this.count) {
                    alert('请填写完整信息！');
                    return;
                }
                let date = new Date();
                this.dateTime = date;
                this.business.push({
                    dateTime:this.dateTime,
                    name: this.name,
                    totalAll: this.totalAll,
                    freight: this.freight,
                    sumTotal: this.sumTotal
                });
                this.clear();
            }
        },
        computed: {
            total: function () {
                // TODO：：完成计算购买价
				if(this.price==0|this.price===''&this.count==0|this.count==='')
				{
					this.totalAll='';
				}
				else
				{
					this.totalAll=this.price * this.count;
					return this.price * this.count;
				}
            },
            sum: function () {
                // TODO：：完成计算包括运费在内的总价，购买价大于100免运费

                if (this.totalAll >= 100) {
                    this.freight = 0;
					this.sumTotal=(parseFloat(this.totalAll) + parseFloat(this.freight)).toFixed(2);
					return (parseFloat(this.totalAll) + parseFloat(this.freight)).toFixed(2);
                } else {
                	if(this.totalAll==='')
					{
						this.freight=''
					}
                	else
					{
						this.freight = 10;
						this.sumTotal=(parseFloat(this.totalAll) + parseFloat(this.freight)).toFixed(2);
						return (parseFloat(this.totalAll) + parseFloat(this.freight)).toFixed(2);
					}
                }

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

js代码 <我的命名为了vue.min.js>

{"code":"success","data":[{"dataName":"404.html","dataSrc":"404.html"},
  {"dataName":"about.html","dataSrc":"about.html"},
  {"dataName":"blog-01.html","dataSrc":"blog-01.html"},
  {"dataName":"blog-02.html","dataSrc":"blog-02.html"},
  {"dataName":"blog-03.html","dataSrc":"blog-03.html"},
  {"dataName":"blog-04.html","dataSrc":"blog-04.html"},
  {"dataName":"blog-05.html","dataSrc":"blog-05.html"},
  {"dataName":"blog_single-01.html","dataSrc":"blog_single-01.html"},
  {"dataName":"blog_single-02.html","dataSrc":"blog_single-02.html"},
  {"dataName":"blog_single-03.html","dataSrc":"blog_single-03.html"},
  {"dataName":"cart.html","dataSrc":"cart.html"},
  {"dataName":"coming-soon.html","dataSrc":"coming-soon.html"},
  {"dataName":"contact.html","dataSrc":"contact.html"},
  {"dataName":"department-01.html","dataSrc":"department-01.html"},
  {"dataName":"department-02.html","dataSrc":"department-02.html"},
  {"dataName":"department-03.html","dataSrc":"department-03.html"},
  {"dataName":"doctor-01.html","dataSrc":"doctor-01.html"},
  {"dataName":"doctor-02.html","dataSrc":"doctor-02.html"},
  {"dataName":"gallery-01.html","dataSrc":"gallery-01.html"},
  {"dataName":"gallery-02.html","dataSrc":"gallery-02.html"},
  {"dataName":"gallery-03.html","dataSrc":"gallery-03.html"},
  {"dataName":"home-02.html","dataSrc":"home-02.html"},
  {"dataName":"home-03.html","dataSrc":"home-03.html"},
  {"dataName":"home-04.html","dataSrc":"home-04.html"},
  {"dataName":"home.html","dataSrc":"home.html"},
  {"dataName":"index.html","dataSrc":"index.html"},
  {"dataName":"login.html","dataSrc":"login.html"},
  {"dataName":"register.html","dataSrc":"register.html"},
  {"dataName":"service-01.html","dataSrc":"service-01.html"},
  {"dataName":"service-02.html","dataSrc":"service-02.html"},
  {"dataName":"shop-left-side.html","dataSrc":"shop-left-side.html"},
  {"dataName":"shop-right-side.html","dataSrc":"shop-right-side.html"},
  {"dataName":"shop-single.html","dataSrc":"shop-single.html"},
  {"dataName":"shop.html","dataSrc":"shop.html"}]}