计算属性、方法、过滤器的综合实训-邮购商品业务

最新推荐文章于 2024-09-06 22:20:29 发布

这个函数可导

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量350

点赞数 1

分类专栏：前端工程设计上机实验文章标签： vue.js 前端 javascript html5

本文链接：https://blog.csdn.net/qq_62573714/article/details/134804731

版权

前端工程设计上机实验专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【实训要求】

(1)学会定义Vue实例对象，会配置el和data、methods、computed等选项。

(2)学会引入Vue.js, 并完成Vue视图中表单的定义。

(3)学会使用V-model、v-on、v-for等指令完成表单绑定、事件绑定、遍历商品。

(4)学会使用CSS定义<table>、<tr>、<fieldset>、<input>等标记的样式。

(5) 学会定文filters和methods属性。

【设计要求】

(1)按图1所示页面完成邮购商品业务初始化界面设计。分别为“客户姓名”、“单价”、“数量”、“购买价”“、“总价”文本框绑定变量name、price、count、 total、sum, 其中“购买价”和“总价”两个文本框设置为只读。添加两个普通按钮，分别为“记入流水”“、“重置”，绑定单击事件，分别调用add()和clear()方法。

图1 邮购商品业务初始页面

(2)当用户完整输入客户姓名、单价和数量后，自动计算购买价、运费和总价，并填充在相应的文本框中。运费收取规则为：客户购买价大于100 元时免收运费，否则收10元运费。然后单击“记入流水”按钮，将购买相关数据写入当日流水账中。

(3)当单击“重置"按钮时，将“客户姓名”、“单价”和“数量”文本框清空， “购买价”和“总价”文本框自动清空。当用户未输入姓名时，单击“记入流水”按钮会提示告警信息。

(4)定义add()、clear()方法。

add() 方法的功能是将商品购买信息添加到business数组中，并从数组的末尾插入。其中business数组的属性分别为 dateTime (业务时间)、name(客户姓名)、totalAll(购买价)、freight (运费)、sumToal (总价)。clear()方法的功能是分别清除“客户姓名” 、“单价”和“数量”文本框中的内容。

【实训步骤】

(1)建立HTML文件。将项目文件命名为vue-ex-2-2.html。正确引入Vue.js文件，完成“邮购商品业务” 表单内容的设计，使用v-model和v-on指令为表单元素绑定表单和事件。通过<table>标记展示销售流水账，在<tr>标记上使用v-for指令遍历所有销售记来。

(2)定义Vue实例，分别完成el、data、methods 和watch等选项的配置。

定义el，挂载元素为#vue-ex-22。

定义data，分别定义name、price、count、total、sum和保存销售流水帐的数组变量business等初始值(为空)。

定义methods选项。按照设计要求(4) 定义add()和clear()方法。

●定义computed选项。购买价=单价X数量，计算结果保留两位小数。总价=购买价+运费，计算结果保留两位小数。

定义全局过滤器dateFormat，使用Vue.filter('dateFormat’,function(date)){…}，功能为完成当前系统日期的格式化处理，输出结果形式为“2019-9-21 16:23:38:641"。

(3)定义相关样式。

●<table>标记样式: 宽度626px，边框宽度1px，单线边框，边框颜色#008000，表格内容居中对齐，边界(上下为0、左右自动)。

. <input>标记样式: 宽度150px，高度25px圆角边框(半径4px)。

●<tr>标记样式: 高度30px。

●<fieldset>标记样式：边界(上下为0、左右自动)，填充10px. 宽度600px，边框(1px、双线、颜色#008000) 。

【代码实现】

<!-- vue-ex-2-2.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>邮购商品业务</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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>

【效果展示】

图1 邮购商品业务初始页面

图2 单击”重置“按钮时页面

图3 输入业务数据并单击“记入流水”按钮时页面

图4 未输入业务数据直接单击“记入流水”按钮时页面

这个函数可导

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
计算属性、方法、过滤器的综合实训-邮购商品业务

(1)学会定义Vue实例对象，会配置el和data、methods、computed等选项。(2)学会引入Vue.js, 并完成Vue视图中表单的定义。(3)学会使用V-model、v-on、v-for等指令完成表单绑定、事件绑定、遍历商品。(4)学会使用CSS定义<table>、<tr>、<fieldset>、<input>等标记的样式。(5) 学会定文filters和methods属性。(1)按所示页面完成邮购商品业务初始化界面设计。
复制链接

扫一扫