<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>邮购商品业务</title>
<!-- 引入vue.js -->
<script src="./js/vue.global.js" type="text/javascript"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="vue-e-22">
<div>
<form>
<fieldset>
<legend align="center">邮购商品业务</legend>
<!--TODO1: 在下面四行代码中补全v-model指令，完成表单数据绑定 理解v-model双向绑定的特点 -->
客户姓名：<input type="text" key="name" v-model="name"/>
单价：<input type="text" key="price" v-model="price"/>
数量：<input type="text" key="count" v-model="count"/>
购买价：<input type="text" key="total" v-model="total" readonly><br>
<br>
总价：<input type="text" readonly v-model="sum" key="sum">
运费：{{ freight }}（购买价>=100元免运费）<br>
<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>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in business" :key="index">
<td>{{ formatDate(item.dateTime) }}</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">
const { createApp, ref, computed } = Vue;
createApp({
setup() {
const name = ref('');
const price = ref('');
const count = ref('');
const business = ref([]);
// total计算属性
const total = computed(() => {
// TODO2：下面补充代码，完成计算购买价
if (name.value && price.value && count.value)
return price.value * count.value;
});
//freight计算属性
const freight = computed(() => {
// TODO3：下面补充代码，计算运费，购买价大于100免运
if(total.value>=100)
return 0;
return 10;
});
// sum是计算属性
const sum = computed(() => {
// TODO4：下面补充代码，完成计算包括运费在内的总价
if (name.value && price.value && count.value)
return total.value + freight.value;
});
const clear = () => {
// TODO5：下面补充代码，完成清除输入域
name.value = '';
price.value = 0;
count.value = 0;
business.value = [];
};
const add = () => {
// TODO6：下面补充代码，完成添加流水
if (name.value && price.value && count.value) {
recode = {
dateTime: new Date(),
name: name.value,
totalAll: total.value,
freight: freight.value,
sumTotal: sum.value
};
business.value.push(recode);
}
};
const formatDate = (date) => {
let dy = date.getFullYear();
let dm = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
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}`;
};
return {
name,
price,
count,
business,
total,
freight,
sum,
clear,
add,
formatDate
};
}
}).mount('#vue-e-22');
</script>
</body>
</html>
按住Ctrl点击导入的js和css文件路径将所需代码复制过去，或是将文件路径更改
将helloworld.vue文件的多余部分删去
效果图：
配置环境可参考： 如何搭建一个vue项目(完整步骤)_vue搭建-CSDN博客
