day78 作业

目录

• 1 在作业.html的代码基础上，完成商品数量的加减，注意商品数量如果低于0个，则自动删除当前商品
• 2 在作业.html的代码基础仧，完成购物车总价格的计算
• 3 使用ajax获取北京天气，并把昨天和未来5天天气情况以表格格式展示到html页面中。

1 在作业.html的代码基础上，完成商品数量的加减，注意商品数量如果低于0个，则自动删除当前商品

2 在作业.html的代码基础仧，完成购物车总价格的计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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;
    }
    </style>
    <script src="/vue/vue.js"></script>
</head>
<body>
<!--1. 在作业.html的代码基础上，完成商品数量的加减，注意商品数量如果低于0个，则自动删除当前商品-->
<!--2. 在作业.html的代码基础仧，完成购物车总价格的计算。-->
    <div id="goods">
        <button @click="is_show=true;goods_index=-1;">添加商品</button>
        <table>
            <tr>
                <th>商品编号</th>
                <th>商品标题</th>
                <th>商品数量</th>
                <th>商品价格</th>
                <th>操作</th>
            </tr>
            <tr v-for="goods,index in goods_list">
                <td>{{index+1}}</td>
                <td>{{goods.name}}</td>
                <td>
                    <button @click="sub(index)">-</button>
                    <input type="text" size="2" v-model="goods.num">
                    <button @click="goods.num++">+</button>
                </td>
                <td>{{goods.price.toFixed(2)}}</td>
                <td>
                    <button @click="update(index)">编辑</button>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="5">总计：　{{sum}}元</td>
            </tr>
        </table>
        <div class="box" v-show="is_show">
            商品标题: <input type="text" v-model="goods_name"><br><br>
            商品数量: <input type="text" v-model="goods_num"><br><br>
            商品价格: <input type="text" v-model="goods_price"><br><br>
            <button @click="save">保存</button>
            <button @click="cancel">取消</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#goods",
            data:{
                is_show:false,
                goods_name:"",
                goods_num:"",
                goods_price:"",
                goods_index:-1, // 当前本次操作的商品信息[-1表示新增,大于0表示编辑]
                goods_list:[
                    {"name":"python入门","num":27,"price":150},
                    {"name":"python进阶","num":21,"price":100},
                    {"name":"python高级","num":17,"price":75},
                    {"name":"python研究","num":37,"price":60},
                    {"name":"python放弃","num":57,"price":110},
                ]
            },
            methods:{
                save(){
                    // 保存数据[添加数据]
                    if(this.goods_index==-1){
                        this.goods_list.push({
                            "name":this.goods_name,
                            "num":parseInt(this.goods_num),
                            "price":parseFloat(this.goods_price),
                        });
                    }else{
                        this.goods_list[this.goods_index].name=this.goods_name;
                        this.goods_list[this.goods_index].num=parseInt(this.goods_num);
                        this.goods_list[this.goods_index].price=parseFloat(this.goods_price);
                    }

                    this.cancel();
                },
                cancel(){
                    this.is_show=false;
                    this.goods_index= -1;
                    this.goods_name= "";
                    this.goods_num= "";
                    this.goods_price= "";
                },
                del(index){
                    // 删除数据
                    this.goods_list.splice(index,1);
                },
                update(index){
                    // 先弹窗
                    this.is_show=true;
                    // 显示当前编辑的商品信息
                    this.goods_index=index;
                    this.goods_name=this.goods_list[index].name;
                    this.goods_num=this.goods_list[index].num;
                    this.goods_price=this.goods_list[index].price;
                    // 当用户点击保存时，修改对应数据
                },
                sub(index){
                    let num = this.goods_list[index].num
                    console.log(num)
                    if(num==0){
                        this.goods_list.splice(index,1)
                    }else {
                        this.goods_list[index].num--
                    }
                }
            },
            computed:{
                sum(){
                    let all_count = 0
                    for(var i=0;i<this.goods_list.length;i++){
                         all_count += this.goods_list[i].num*this.goods_list[i].price
                    }
                    return all_count
                }
            },

        })
    </script>
</body>
</html>

3 使用ajax获取北京天气，并把昨天和未来5天天气情况以表格格式展示到html页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="/vue/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

</head>
<body>
<div id="app">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>时间</th>
                <th>风力</th>
                <th>风向</th>
                <th>最高温</th>
                <th>最低温</th>

            </tr>
        </thead>
        <tbody>
            <tr v-for="city_weather in weather">
                <td>{{city_weather.date}}</td>
                <td>{{city_weather.fengli}}</td>
                <td>{{city_weather.fengxiang}}</td>
                <td>{{city_weather.high}}</td>
                <td>{{city_weather.low}}</td>
            </tr>
        </tbody>
    </table>
    <input type="text" v-model="city">
    <button @click="get_weather" class="btn btn-info" >点击</button>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            city:'北京',
            weather:[]
        },
        methods:{
            get_weather(){
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                .then(response=>{
                    this.weather=response.data.data.forecast
                }).catch(error=>{
                    console.log(error.data)
                })
            }
        }
    })
</script>
</body>
</html>