当前位置：首页 > news >正文

Web课外练习9

news 2025/8/5 0:18:23

<!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文件的多余部分删去

效果图：