1、商品
<!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.min.js"></script> </head> <body> <div id="goods"> <button @click="is_show=true;goods_index=-1;">添加商品</button> <br> <br> <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="reduce_goods(index)" :disabled="active == index">-</button> <input type="text" size="2" v-model="goods.num"> <button @click="add_goods(index)">+</button> </td> <td>{{goods.price|format}}</td> <td> <button @click="update(index)">编辑</button> <button @click="del(index)">删除</button> </td> </tr> <tr> <td colspan="5">总计： {{total|format}}</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", filters: { format(money) { return "￥" + money.toFixed(2); } }, data:{ is_show:false, active:"zero_num", 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; // 当用户点击保存时，修改对应数据 }, reduce_goods(index){ if(this.goods_list[index].num-- <= 1){ this.goods_list[index].num = 0; this.active =index; } }, add_goods(index){ this.goods_list[index].num++; this.active="zero_num"; } }, computed:{ total: function(){ // total是计算属性中的方法名，是上面标签内使用的文本 var ret = 0; for (i in this.goods_list){ let sum_price = parseFloat(this.goods_list[i].price) * parseFloat(this.goods_list[i].num); ret = ret + sum_price } return ret } } }) </script> </body> </html>
2、天气展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- Bootstrap3 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstrap3 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- font-awesome.min.css图标库4.7版本 --> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios@0.18.0/dist/axios.js"></script> </head> <body> <div class="container" style="margin-top: 30px"> <div id="app"> <input type="text" v-model="city" placeholder="输入城市名称获取天气情报"> <button @click="getweather">获取天气</button> <h3>当前温度: {{data.wendu}}</h3> <h3>温馨提示：{{data.ganmao}}</h3> <h3>昨日天气</h3> <table class="table table-striped table-bordered"> <thead> <th>日期</th> <th>风力</th> <th>风向</th> <th>温度(高)</th> <th>温度(低)</th> <th>天气</th> </thead> <tbody> <tr> <td>{{yesterday.date}}</td> <td>{{yesterday.fl}}</td> <td>{{yesterday.fx}}</td> <td>{{yesterday.high}}</td> <td>{{yesterday.low}}</td> <td>{{yesterday.type}}</td> </tr> <tr></tr> </tbody> </table> <h3>未来五天天气</h3> <table class="table table-striped table-bordered"> <thead> <th>日期</th> <th>风力</th> <th>风向</th> <th>温度(高)</th> <th>温度(低)</th> <th>天气</th> </thead> <tbody> <tr v-for="obj in this.data.forecast"> <td>{{obj.date}}</td> <td>{{obj.fengli}}</td> <td>{{obj.fengxiang}}</td> <td>{{obj.high}}</td> <td>{{obj.low}}</td> <td>{{obj.type}}</td> </tr> <tr></tr> </tbody> </table> </div> </div> <script> vm = new Vue({ el: '#app', data: { city: '', data: '', yesterday: '', }, methods: { getweather(){ axios.get("http://wthrcdn.etouch.cn/weather_mini",{ params: { 'city': this.city, }, }).then(response=>{ let data = response.data.data; this.data = data this.yesterday = data.yesterday }).catch(error=>{ console.log(error.response) }); } } }) </script> </body> </html>