Web课外练习9

最新推荐文章于 2024-08-17 21:04:51 发布

没啥实力

最新推荐文章于 2024-08-17 21:04:51 发布

阅读量345

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/weixin_74021012/article/details/139212390

版权

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

效果图：