需求：

1. 在作业1.html代码的基础上，引入vue.js文件，并实例化vm对象，绑定#goods元素

2. 在作业1.html代码的基础上，默认中间弹出窗口隐藏起来，当用户点击"添加商品"，显示弹出窗口

3. 在作业1.html代码的基础上，当用户点击弹出窗口的"保存"或者"取消"按钮时，隐藏弹出窗

4. 在作业2.html代码的基础上，把以下数据全部通过vue显示到页面中。

goods_list:[

	{"name":"python入门","num":27,"price":150},

	{"name":"python进阶","num":27,"price":100},

	{"name":"python高级","num":27,"price":75},

	{"name":"python研究","num":27,"price":60},

	{"name":"python放弃","num":27,"price":110},

]

5. 在作业2.html代码的基础上，实现数据隔行换色效果，奇数行背景为#aaaaff，偶数行背景为#ffaaaa

作业1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

    <style>

    #goods table{

        width: 600px;

        border:1px solid #000;

        border-collapse: collapse;

    }

    #goods td,#goods th{

        border: 1px solid #000;

    }

    #goods .box{

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        margin: auto;

        background-color: #eee;

        width: 280px;

        height: 160px;

        padding: 40px 80px;

    }

    .display{

        display: none;

    }

    </style>

</head>

<body>

    <div id="goods">

        <button @click="type=false">添加商品</button>

        <table>

            <tr>

                <th>商品id</th>

                <th>商品标题</th>

                <th>商品数量</th>

                <th>商品价格</th>

                <th>操作</th>

            </tr>

            <tr>

                <td>12</td>

                <td>python入门</td>

                <td>

                    <button>-</button>

                    <input type="text" size="2">

                    <button>+</button>

                </td>

                <td>15.5</td>

                <td>

                    <button>编辑</button>

                    <button>删除</button>

                </td>

            </tr>

            <tr>

                <td colspan="5">总计：　1000元</td>

            </tr>

        </table>

        <div :class="{box:true,display:type}">

            商品标题: <input type="text"><br><br>

            商品数量: <input type="text"><br><br>

            商品价格: <input type="text"><br><br>

            <button>保存</button>

            <button @click="type=true">取消</button>

        </div>

    </div>

<script>

    let vm = new Vue({

        el:'#goods',

        data:{

            type:true

        },

    })

</script>

</body>

</html>

作业2：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

    <style>

    #goods table{

        width: 600px;

        border:1px solid #000;

        border-collapse: collapse;

    }

    #goods td,#goods th{

        border: 1px solid #000;

    }

    </style>

</head>

<body>

    <div id="goods">

        <table>

            <tr>

                <th>商品序号</th>

                <th>商品标题</th>

                <th>商品数量</th>

                <th>商品价格</th>

            </tr>

            <tr v-for="(good,index) in goods_list"

                bgcolor="index%2==0?'#aaaaff':'#ffffaa'">

                <td>{{index+1}}</td>

                <td>{{good.name}}</td>

                <td>{{good.num}}</td>

                <td>{{good.price}}</td>

            </tr>

        </table>

    </div>

    <script>

        let vm = new Vue({

            el:'#goods',

            data:{

                goods_list:[

                    {'name':'python入门','num':27,'price':150},

                    {'name':'python进阶','num':27,'price':100},

                    {'name':'python高级','num':27,'price':75},

                    {'name':'python研究','num':27,'price':60},

                    {'name':'python放弃','num':27,'price':110},

                ]

            }

        })

    </script>

</body>

</html>

day76 作业的更多相关文章

  1. python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）

    类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...

  2. SQLServer2005创建定时作业任务

    SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...

  3. 使用T-SQL找出执行时间过长的作业

        有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下:   SELECT sj.name , ...

  4. T-SQL检查停止的复制作业代理，并启动

        有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...

  5. Python09作业思路及源码：高级FTP服务器开发（仅供参考）

    高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...

  6. 个人作业week3——代码复审

    1.     软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...

  7. 个人作业-week2：关于微软必应词典的案例分析

    第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...

  8. 软件工程第二次作业——git的使用

    1. 参照 http://www.cnblogs.com/xinz/p/3803109.html 的第一题,每人建立一个GitHub账号,组长建立一个Project,将本组成员纳入此Porject中的 ...

  9. hadoop作业调度策略

    一个Mapreduce作业是通过JobClient向master的JobTasker提交的(JobTasker一直在等待JobClient通过RPC协议提交作业),JobTasker接到JobClie ...

随机推荐

  1. 京东商品 + selenium

    from selenium import webdriver import time from selenium.webdriver.common.keys import Keys bro=webdr ...

  2. Java使用 Thumbnails 压缩图片

    业务:用户上传一张图片到文件站,需要返回原图url和缩略图url 处理思路: 因为上传图片方法返回url是单个上传,第一步先上传原图并返回url 处理缩略图并上传:拿到MultipartFile压缩成 ...

  3. JDK Base64编解码1.7和1.8的坑

    场景 对接一个第三方api接口,其中签名部分用的是JDK8的编码.我们线上采用JDK7,导致项目无法编译 替换编解码部分为1.7的代码,然后签名又不对 所以坑就在这里,结论,1.7的编解码有换行符导致 ...

  4. MyBatis使用模糊查询用户信息及log4j配置文件详解

    1.1 根据用户名称模糊查询用户信息 根据用户名模糊查询用户信息,只需要我们更改映射文件中的sql语句.其他的内容跟上一篇的内容是一样的 1.2添加根据用户名称模糊查询用户信息的sql语句 实例中是查 ...

  5. android中getWidth()和getMeasuredWidth()之间的区别

    先给出一个结论:getMeasuredWidth()获取的是view原始的大小,也就是这个view在XML文件中配置或者是代码中设置的大小.getWidth()获取的是这个view最终显示的大小,这个 ...

  6. Android学习笔记使用Notication 显示通知

    实现步骤 代码实现 创建MainActivity和DetailActivity(点击通知后要跳转的Activity),两个Activity的布局文件就是添加一张全屏的背景图,老规矩,不粘贴. Main ...

  7. VS Code WebApi系列——1、配置

    Knowledge should be Shared in Free. 最近在研究VS code下的webapi,看了很多文档,还是微软官方的例子好,不过不太适应国人习惯,所以写点东西. 直接了当 开 ...

  8. 12.实战交付一套dubbo微服务到k8s集群(5)之交付dubbo-monitor到K8S集群

    dubbo-monitor官方源码地址:https://github.com/Jeromefromcn/dubbo-monitor 1.下载dubbo-monitor源码并解压 [root@hdss7 ...

  9. Linux下如何查看硬件信息？

    我们在 Linux 下进行开发时,有时也需要知道当前的硬件信息,比如:CPU几核?使用情况?内存大小及使用情况?USB设备是否被识别?等等类似此类问题.下面良许介绍一些常用的硬件查看命令. lshw ...

  10. Jmeter工具环境搭建

    Jmeter工具什么 1 多线程框架-支持多并发操作 2 用于对服务器模拟负载 3 支持web,数据库,FTP服务器系统的性能测试 4 开源,可二次定制开发 下载Java JDK 下载地址: http ...