【vue】封装的天气展示卡片，在线获取天气信息
源码
<template><div class="sen_weather_wrapper"><div class="sen_top_box"><div class="sen_left_box"><div class="sen_top"><div class="sen_city">山东</div><qctc-time class="sen_time_box"></qctc-time></div><div class="sen_bot"><div class="sen_current">{{ weatherObj.tempData }}<span>℃</span></div><div class="sen_currentDays"><el-image style="width: 1.8rem; height: 1.8rem;margin-right: 5px;":src="weatherObj.weatherImg" fit="cover"/><div>{{ weatherObj.minTemperature }}℃<spanstyle="margin: 0 5px;">~</span>{{ weatherObj.maxTemperature }}℃</div></div></div></div><div class="sen_right_box"><span>风速：{{ weatherObj.degData }}{{ weatherObj.windspeed }}级</span><span>湿度：{{ weatherObj.humidity }}%</span><span>降水量：{{ weatherObj.rainfall }}毫米</span></div></div><div class="sen_bot_box"><div class="list_box" v-for="(item,index) in weatherList"><div class="text_box">{{ item.day }}</div><div class="text_box">{{ item.date }}</div><div class="text_box">{{ item.description }}</div><div class="img_box"><div class="" v-if="item.description == '晴'"><svg version="1.1" id="sunGlobe" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"enable-background="new 0 0 100 100" xml:space="preserve"><g id="sunrays"><radialGradient id="XMLID_4_" cx="51.1566" cy="21.1667" r="4.7267"gradientUnits="userSpaceOnUse"><stop offset="0.3333" style="stop-color:#FBD25A"/><stop offset="0.7581" style="stop-color:#FAD45D"/><stop offset="1" style="stop-color:#F5E16E"/></radialGradient><path id="XMLID_3_" fill="url(#XMLID_4_)" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="M56.1,25.3h-9.7c0,0-1.2-6.1,0-7.4c1.2-1.3,8.9-1,9.7,0C56.8,18.9,56.1,25.3,56.1,25.3z"/><radialGradient id="XMLID_12_" cx="71.2457" cy="29.7708" r="6.0292"gradientUnits="userSpaceOnUse"><stop offset="0.3333" style="stop-color:#FBD25A"/><stop offset="0.7581" style="stop-color:#FAD45D"/><stop offset="1" style="stop-color:#F5E16E"/></radialGradient><path id="XMLID_5_" fill="url(#XMLID_12_)" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="M71.8,35.8l-6.6-7.1c0,0,3.7-5,5.4-5.1s6.8,5.8,6.6,7.1C77.1,32,71.8,35.8,71.8,35.8z"/><radialGradient id="XMLID_13_" cx="79.016" cy="49.1667" r="4.757"gradientUnits="userSpaceOnUse"><stop offset="0.3333" style="stop-color:#FBD25A"/><stop offset="0.7581" style="stop-color:#FAD45D"/><stop offset="1" style="stop-color:#F5E16E"/></radialGradient><path id="XMLID_6_" fill="url(#XMLID_13_)" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="M75.1,54.2l-0.3-9.7c0,0,6.1-1.3,7.4-0.2c1.3,1.1,1.2,8.9,0.3,9.7C81.5,54.8,75.1,54.2,75.1,54.2z"/><radialGradient id="XMLID_14_" cx="70.2457" cy="69.6002" r="6.0234"gradientUnits="userSpaceOnUse"><stop offset="0.3333" style="stop-color:#FBD25A"/><stop offset="0.7581" style="stop-color:#FAD45D"/><stop offset="1" style="stop-color:#F5E16E"/></radialGradient><path id="XMLID_7_" fill="url(#XMLID_14_)" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="M64.3,70.7l6.4-7.2c0,0,5.3,3.2,5.5,4.9c0.2,1.7-5.2,7.3-6.4,7.2C68.5,75.6,64.3,70.7,64.3,70.7z"/><radialGradient id="XMLID_15_" cx="50.7987" cy="78.0712" r="4.7789"gradientTransform="matrix(0.998 -6.322496e-002 6.322496e-002 0.998 -4.8396 3.3703)"gradientUnits="userSpaceOnUse"><stop offset="0.3333" style="stop-color:#FBD25A"/><stop offset="0.7581" style="stop-color:#FAD45D"/><stop offset="1" style="stop-color:#F5E16E"/></radialGradient><path id="XMLID_8_" fill="url(#XMLID_15_)" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="M45.8,74.2l9.7-0.2c0,0,1.3,6.1,0.2,7.4c-1.1,1.3-8.9,1.2-9.7,0.2C45.2,80.6,45.8,74.2,45.8,74.2z"/><radialGradient id="XMLID_16_" cx="30.5864" cy="70.2252" r="6.0153"gradientUnits="userSpaceOnUse"><stop offset="0.3333" style="stop-color:#FBD25A"/><stop offset="0.7581" style="stop-color:#FAD45D"/><stop offset="1" style="stop-color:#F5E16E"/></radialGradient><path id="XMLID_9_" fill="url(#XMLID_16_)" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="M29.3,64.3l7.3,6.3c0,0-3.1,5.4-4.8,5.6s-7.4-5-7.3-6.3C24.6,68.6,29.3,64.3,29.3,64.3z"/><radialGradient id="XMLID_44_" cx="21.0871" cy="50" r="4.8093"gradientUnits="userSpaceOnUse"><stop offset="0.3333" style="stop-color:#FBD25A"/><stop offset="0.7581" style="stop-color:#FAD45D"/><stop offset="1" style="stop-color:#F5E16E"/></radialGradient><path id="XMLID_10_" fill="url(#XMLID_44_)" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="M24.8,44.8l0.6,9.6c0,0-6,1.5-7.4,0.5c-1.4-1.1-1.5-8.8-0.6-9.6C18.3,44.4,24.8,44.8,24.8,44.8z"/><radialGradient id="XMLID_45_" cx="29.9614" cy="29.0073" r="6.019"gradientUnits="userSpaceOnUse"><stop offset="0.3333" style="stop-color:#FBD25A"/><stop offset="0.7581" style="stop-color:#FAD45D"/><stop offset="1" style="stop-color:#F5E16E"/></radialGradient><path id="XMLID_11_" fill="url(#XMLID_45_)" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="M36,28.6L28.7,35c0,0-4.9-3.8-4.9-5.6c0-1.7,6.1-6.6,7.3-6.3C32.4,23.3,36,28.6,36,28.6z"/></g><radialGradient id="XMLID_46_" cx="50" cy="49.1667" r="26.8776"gradientUnits="userSpaceOnUse"><stop offset="0.3333" style="stop-color:#E3BF4C"/><stop offset="0.7473" style="stop-color:#F4CE52"/><stop offset="1" style="stop-color:#F5E16E"/></radialGradient><ellipse id="XMLID_1_" fill="url(#XMLID_46_)" stroke="#58595B" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="50" cy="49.2" rx="27.3"ry="26.5"/></svg></div><div class="" v-if="item.description == '多云'"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"xml:space="preserve"><g id="Layer_4"><radialGradient id="chubbyMoon_1_" cx="73.25" cy="20.1667" r="71.3092"gradientUnits="userSpaceOnUse"><stop offset="0.4082" style="stop-color:#D3D0B2"/><stop offset="0.42" style="stop-color:#C5C4A0"/></radialGradient><ellipse id="chubbyMoon" fill="url(#chubbyMoon_1_)" stroke="#58595B" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="61.8" cy="31.2" rx="27.3"ry="26.5"/><radialGradient id="mooncrater_2_" cx="248.5072" cy="171.0079" r="71.3092"gradientTransform="matrix(0.2761 0 0 0.2761 -4.5736 -17.9305)"gradientUnits="userSpaceOnUse"><stop offset="0.385" style="stop-color:#C2B99D"/><stop offset="0.4082" style="stop-color:#B5AA86"/></radialGradient><ellipse id="mooncrater" fill="url(#mooncrater_2_)" stroke="#58595B" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="60.9" cy="32.3" rx="7.5"ry="7.3"/><radialGradient id="mooncrater_4_" cx="328.3989" cy="-40.7337" r="71.3092"gradientTransform="matrix(7.215338e-002 0 0 7.215340e-002 25.6009 15.7241)"gradientUnits="userSpaceOnUse"><stop offset="0.385" style="stop-color:#C2B99D"/><stop offset="0.4082" style="stop-color:#B5AA86"/></radialGradient><ellipse id="mooncrater_1_" fill="url(#mooncrater_4_)" stroke="#58595B"stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="48.5"cy="13.6" rx="2" ry="1.9"/><radialGradient id="mooncrater_6_" cx="455.6206" cy="33.6355" r="71.3092"gradientTransform="matrix(0.1198 0 0 0.1198 13.506 8.4935)"gradientUnits="userSpaceOnUse"><stop offset="0.385" style="stop-color:#C2B99D"/><stop offset="0.4082" style="stop-color:#B5AA86"/></radialGradient><ellipse id="mooncrater_3_" fill="url(#mooncrater_6_)" stroke="#58595B"stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="66.7"cy="13.8" rx="3.3" ry="3.2"/><radialGradient id="mooncrater_7_" cx="532.6715" cy="160.4353" r="71.3092"gradientTransform="matrix(0.1405 0 0 0.1405 6.587 5.366)"gradientUnits="userSpaceOnUse"><stop offset="0.385" style="stop-color:#C2B99D"/><stop offset="0.4082" style="stop-color:#B5AA86"/></radialGradient><ellipse id="mooncrater_5_" fill="url(#mooncrater_7_)" stroke="#58595B"stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="79.8"cy="29.4" rx="3.8" ry="3.7"/><radialGradient id="mooncrater_10_" cx="236.5847" cy="186.8517" r="71.3092"gradientTransform="matrix(0.1712 0 0 0.1712 2.2486 -2.7871)"gradientUnits="userSpaceOnUse"><stop offset="0.385" style="stop-color:#C2B99D"/><stop offset="0.4082" style="stop-color:#B5AA86"/></radialGradient><ellipse id="mooncrater_8_" fill="url(#mooncrater_10_)" stroke="#58595B"stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="40.8"cy="31.1" rx="4.7" ry="4.5"/><radialGradient id="mooncrater_12_" cx="315.6328" cy="235.365" r="71.3092"gradientTransform="matrix(0.1135 0 0 0.1135 12.8171 17.5574)"gradientUnits="userSpaceOnUse"><stop offset="0.385" style="stop-color:#C2B99D"/><stop offset="0.4082" style="stop-color:#B5AA86"/></radialGradient><ellipse id="mooncrater_9_" fill="url(#mooncrater_12_)" stroke="#58595B"stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="47.3"cy="45.5" rx="3.1" ry="3"/><radialGradient id="mooncrater_13_" cx="500.9887" cy="293.8005" r="71.3092"gradientTransform="matrix(0.1135 0 0 0.1135 12.8171 17.5574)"gradientUnits="userSpaceOnUse"><stop offset="0.385" style="stop-color:#C2B99D"/><stop offset="0.4082" style="stop-color:#B5AA86"/></radialGradient><ellipse id="mooncrater_11_" fill="url(#mooncrater_13_)" stroke="#58595B"stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="68.4"cy="52.2" rx="3.1" ry="3"/></g><g id="smallcloud"><path id="XMLID_3_" fill="#5BCAEB" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="8.000000e-002" d="M19,39.9c0,0,5.7,1.7,7-1.2c5.4,3,9.1,0.6,11.5,0c0.5,2.3,6.1,1.2,6.1,1.2s10.7-2.6,9.9-11.7c0,0-1.9-12.4-14-10c0,0-9.7-9.5-18.6,2.5c0,0-9-0.5-10.3,10C10.6,30.7,10.9,37.8,19,39.9z"/></g><g id="bigCloud"><path id="XMLID_9_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="8.000000e-002"d=" M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/></g></svg></div><div class=""v-if="item.description == '小雨' || item.description == '中雨' || item.description == '大雨'"><svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"enable-background="new 0 0 100 100" xml:space="preserve"><g id="rain"><path class="raindrop" id="drop1" fill="url(#XMLID_19_)" stroke="#000000"stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="0.5" d="M33.8,67.2c0,0-10.4,14.3,0,14.3C44.4,81.5,33.8,67.2,33.8,67.2z"/><path class="raindrop" id="drop2" fill="url(#XMLID_19_)" stroke="#000000"stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="0.5" d="M48.2,67c0,0-10.4,14.3,0,14.3C58.8,81.3,48.2,67,48.2,67z"/><linearGradient id="XMLID_19_" gradientUnits="userSpaceOnUse" x1="57.7887" y1="74.1052"x2="67.118" y2="74.1052"><stop offset="0.4718" style="stop-color:#5CCAEB"/><stop offset="0.5339" style="stop-color:#51B1CD"/></linearGradient><path class="raindrop" id="drop3" fill="url(#XMLID_19_)" stroke="#000000"stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="0.5" d="M62.4,67c0,0-10.4,14.3,0,14.3C73,81.3,62.4,67,62.4,67z"/></g><g id="bigCloudRain"><path id="XMLID_1_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="8.000000e-002"d="M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/></g></svg></div><div class="" v-if="item.description == '阴'"><svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"enable-background="new 0 0 100 100" xml:space="preserve"><g id="bigCloudRain"><path id="XMLID_1_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="8.000000e-002"d="M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/></g></svg></div><div class="" v-if="item.description == '雷阵雨'"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"xml:space="preserve"><g id="thunder"><polygon fill="#FAC73F"points="45.6,61.5 39.4,77.6 47.6,77.4 43.1,91.9 44.3,91.9 59.3,73.5 51.4,73.4 58.7,61.5 "/></g><g id="smallcloud"><path id="XMLID_3_" fill="#F4F4F4" stroke="#6D6E71" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="8.000000e-002" d="M19,39.9c0,0,5.7,1.7,7-1.2c5.4,3,9.1,0.6,11.5,0c0.5,2.3,6.1,1.2,6.1,1.2s10.7-2.6,9.9-11.7c0,0-1.9-12.4-14-10c0,0-9.7-9.5-18.6,2.5c0,0-9-0.5-10.3,10C10.6,30.7,10.9,37.8,19,39.9z"/></g><g id="bigClouds"><path id="XMLID_16_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="8.000000e-002"d="M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/></g></svg></div><div class=""v-if="item.description == '小雪' || item.description == '中雪' || item.description == '大雪'"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"xml:space="preserve"><g id="snowflakes"><g id="flake3"><path fill="#5BCAEB" d="M72,78.1c0.6,0.6,0.6,1.6,0,2.2l0,0c-0.6,0.6-1.6,0.6-2.2,0l-8.7-8.7C60.5,71,60.3,70,61,69.3s1.7-0.4,2.3,0.2L72,78.1z"/><path fill="#5BCAEB" d="M63.1,80.3c-0.6,0.6-1.6,0.6-2.2,0l0,0c-0.6-0.6-0.6-1.6,0-2.2l8.7-8.7c0.6-0.6,1.7-0.8,2.3-0.2c0.7,0.7,0.4,1.7-0.2,2.3L63.1,80.3z"/><path fill="#5BCAEB" d="M60.2,76.3c-0.9,0-1.5-0.7-1.5-1.5l0,0c0-0.9,0.7-1.5,1.5-1.5h12.3c0.9,0,1.8,0.6,1.8,1.5c0,0.9-0.9,1.5-1.8,1.5H60.2z"/><path id="XMLID_8_" fill="#5BCAEB" d="M68,81c0,0.9-0.7,1.5-1.5,1.5l0,0c-0.9,0-1.5-0.7-1.5-1.5V68.8c0-0.9,0.6-1.8,1.5-1.8c0.9,0,1.5,0.9,1.5,1.8V81z"/></g><g id="flake2"><path fill="#5BCAEB" d="M53.5,78.1c0.6,0.6,0.6,1.6,0,2.2l0,0c-0.6,0.6-1.6,0.6-2.2,0l-8.7-8.7C42,71,41.8,70,42.5,69.3c0.7-0.7,1.7-0.4,2.3,0.2L53.5,78.1z"/><path fill="#5BCAEB" d="M44.6,80.3c-0.6,0.6-1.6,0.6-2.2,0l0,0c-0.6-0.6-0.6-1.6,0-2.2l8.7-8.7c0.6-0.6,1.7-0.8,2.3-0.2c0.7,0.7,0.4,1.7-0.2,2.3L44.6,80.3z"/><path fill="#5BCAEB" d="M41.7,76.3c-0.9,0-1.5-0.7-1.5-1.5l0,0c0-0.9,0.7-1.5,1.5-1.5H54c0.9,0,1.8,0.6,1.8,1.5c0,0.9-0.9,1.5-1.8,1.5H41.7z"/><path id="XMLID_17_" fill="#5BCAEB" d="M49.5,81c0,0.9-0.7,1.5-1.5,1.5l0,0c-0.9,0-1.5-0.7-1.5-1.5V68.8c0-0.9,0.6-1.8,1.5-1.8c0.9,0,1.5,0.9,1.5,1.8V81z"/></g><g id="flake1"><path fill="#5BCAEB" d="M35.1,78.1c0.6,0.6,0.6,1.6,0,2.2l0,0c-0.6,0.6-1.6,0.6-2.2,0l-8.7-8.7c-0.6-0.6-0.8-1.7-0.2-2.3c0.7-0.7,1.7-0.4,2.3,0.2L35.1,78.1z"/><path fill="#5BCAEB" d="M26.3,80.3c-0.6,0.6-1.6,0.6-2.2,0l0,0c-0.6-0.6-0.6-1.6,0-2.2l8.7-8.7c0.6-0.6,1.7-0.8,2.3-0.2c0.7,0.7,0.4,1.7-0.2,2.3L26.3,80.3z"/><path fill="#5BCAEB" d="M23.4,76.3c-0.9,0-1.5-0.7-1.5-1.5l0,0c0-0.9,0.7-1.5,1.5-1.5h12.3c0.9,0,1.8,0.6,1.8,1.5c0,0.9-0.9,1.5-1.8,1.5H23.4z"/><path fill="#5BCAEB" d="M31.1,81c0,0.9-0.7,1.5-1.5,1.5l0,0c-0.9,0-1.5-0.7-1.5-1.5V68.8c0-0.9,0.6-1.8,1.5-1.8s1.5,0.9,1.5,1.8V81z"/></g></g><g id="bigCloudSnow"><path id="XMLID_1_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"stroke-miterlimit="10" stroke-opacity="8.000000e-002"d="M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/></g></svg></div><!-- <el-image style="width: 3rem; height: 3rem;":src="item.weatherImg" fit="cover" /> --></div><div class="text_box1">{{ item.minTemperature }}℃<spanstyle="margin: 0 5px;">~</span>{{ item.maxTemperature }}℃</div></div><div class="chart_box"><q-charts :option="weatherOption"></q-charts></div></div></div>
</template>资料包：https://download.csdn.net/download/galaxyJING/89331774
相关文章：
【vue】封装的天气展示卡片，在线获取天气信息
源码 <template><div class"sen_weather_wrapper"><div class"sen_top_box"><div class"sen_left_box"><div class"sen_top"><div class"sen_city">山东</div><qctc-time cl…...
【MySQL】库的操作和表的操作
库的操作和表的操作 一、库的操作1、创建数据库(create)2、字符集和校验规则（1）查看系统默认字符集以及校验规则（2）查看数据库支持的字符集（3）查看数据库支持的字符集校验规则（4）校验…...
【学习笔记】后端（Ⅰ）—— NodeJS（Ⅱ）
NodeJS 3、进阶篇 —— Express框架 3.1、Express 框架介绍 3.2、Express 框架初体验 3.3、使用 3.4、中间件 3.5、托管静态文件 3.6、获取表单数据 3.7、防盗链 3.8、路由模式化 3.8、EJS 模板引擎 3.9、express-generator…...
VMware报平台不支持虚拟化Win10家庭版关闭Hyper-V及内核隔离
1.BIOS中开启虚拟化功能 2.启动或关闭程序中找不到Hyper-v 停止 hypervisorlaunchtype（Windows Hyper-V 启动加载器） 以管理员的身份打开命令行窗口，运行如下命令，关闭停止 Windows Hyper-V 启动加载器 开启 Windows Hyper-V 启…...
简单介绍十款可以免费使用的API测试工具
API开发应该是后端开发最常见的工作，而调试和测试API是非常关键的，这篇文章简单介绍几款常用的工具以供大家参考。 SoapUI SoapUI是很老牌的工具的，在之前Webservice盛行的时候经常会用到。 现在官方推出了Pro版本的ReadyAPI，但要…...
非授权人员进入报警系统
非授权人员进入报警系统基于智能视频分析技术和深度学习技术，非授权人员进入报警系统通过现场已经装好的监控摄像头针对人体进行精准检测，并根据设置的禁入区范围进行判断。通过图像处理和人体识别算法，非授权人员进入报警系统可以在实时监测…...
Mysql基础教程（03）：AND
MySQL AND 运算符的用法 本文介绍了 MySQL 中如何在 WHERE 子句中使用 AND 运算符组合多个查询条件过滤查询数据。 当使用 SELECT 查询数据时，如果 WHERE 子句中有多个条件，可以根据需要使用 AND, OR, 或者 NOT 运算符将他们组合起来。本文主要介绍 AN…...
为什么要使用 eval
调用 eval 方法的原因是为了确保模型在进行预测时使用正确的配置。在训练过程中，某些层（如 Dropout 层）的行为是为了正则化而设计的，它们会在每次迭代中随机丢弃一些神经元的输出。而在评估模式下，这些层将不再随机丢弃…...
BCD编码(8421)介绍
概念 BCD (Binary-Coded Decimal) 是一种二进制的数字编码形式，其特点每个十进制数位用4个二进制位来表示。 在网络IO中，你传输一个数字类型最少需要一字节，传输两个数字类型最少需要两字节，但是当你使用BCD编码后传输ÿ…...
前端javascript包管理，npm升级用pnpm
一 pnpm 介绍 pnpm（Package Manager）是一个快速、节省磁盘空间的 JavaScript 包管理器，它是 Node.js 生态系统中 npm 的一个替代品。pnpm 解决了传统包管理工具在处理依赖时的一些痛点，特别是关于存储空间使用和依赖地狱的问题。…...
数据库操作（函数）
函数是一段可以直接被另外一段程序调用的程序或代码 一。字符串函数 1.concat(s1,s1....sn)：字符串拼接，将s1，s2，sn拼接为一个字符串 例如： select concat("hello","world"); 2.lower(str&…...
[建堆堆排序的时间复杂度推导]向上建堆向下建堆堆排序的时间复杂度分析推导
💖💖💖欢迎来到我的博客，我是anmory💖💖💖 又和大家见面了 欢迎来到动画详解数据结构系列 作为一个程序员你不能不掌握的知识 先来自我推荐一波 个人网站欢迎访问以及捐款 推荐阅读 如何低成本搭…...
【C++初阶】--- C++入门（上）
目录 一、C的背景及简要介绍1.1 什么是C1.2 C发展史1.3 C的重要性 二、C关键字三、命名空间2.1 命名空间定义2.2 命名空间使用 四、C输入 & 输出 一、C的背景及简要介绍 1.1 什么是C C语言是结构化和模块化的语言，适合处理较小规模的程序。对于复杂的问题&…...
安装和使用图像处理软件GraphicsMagick @FreeBSD
GraphicsMagick是一个用于处理图像的读取、写入和操作的工具软件。它被誉为图像处理领域的“瑞士军刀”，短小精悍，支持超过88种图像格式，包括DPX、GIF、JPEG、JPEG-2000、PNG、PDF、PNM和TIFF等。 GraphicsMagick的主要特点包括：…...
一款功能强大的安卓虚拟机应用——VMOS Pro使用分享
前段时间我刚刚分享一个WeChat平板模块能够允许用户自由修改系统设置，让你的Android备用手机焕发新生，实现手机PAD化，实现两台设备同时登录微信号。今天我分享的这个相比WeChat更为简单，因为它可以通过虚拟机的方式进行多种androi…...
【408真题】2009-12
“接”是针对题目进行必要的分析，比较简略； “化”是对题目中所涉及到的知识点进行详细解释； “发”是对此题型的解题套路总结，并结合历年真题或者典型例题进行运用。 涉及到的知识全部来源于王道各科教材（2025版&…...
vue3第三十三节（TS 之 computed watch）
vue3 组合是API 中我们经常使用的 监听函数 computed 和 watch使用 1、computed 里面添加类型 <script setup lang"ts"> import { ref, computed } from vue const age ref(18) // 定义一个Person 接口 interface Person {age: numbername: string } const…...
工厂模式（简单工厂模式+工厂模式）
工厂模式的目的就是将对象的创建过程隐藏起来，从而达到很高的灵活性，工厂模式分为三类： 简单工厂模式工厂方法模式抽象工厂模式 在没有工厂模式的时候就是，客户需要一辆马车，需要客户亲自去创建一辆马车，…...
整理好了！2024年最常见 20 道 Redis面试题（四）
上一篇地址：整理好了！2024年最常见 20 道 Redis面试题（三）-CSDN博客 七、Redis 单线程模型是如何工作的？ Redis 是一个基于单线程模型的高性能键值存储数据库。尽管 Redis 操作大多数是单线程执行的，但它…...
sudo pip3 install rpi_ws281x error: externally-managed-environment
报错 error: externally-managed-environment piraspberrypi:~ $ sudo pip3 install rpi_ws281x error: externally-managed-environment This environment is externally managed ╰─> To install Python packages system-wide, try apt installpython3-xyz, where xyz i…...
观成科技：隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...
Xshell远程连接Kali（默认 | 私钥）Note版
前言:xshell远程连接，私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异 数据类型差异ÿ…...
第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...
计算机基础知识解析：从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域：无处不在的数字助手 2、 计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...
Git常用命令完全指南：从入门到精通
Git常用命令完全指南：从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统
💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐：「storms…...