【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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/13750.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OCM认证考试难吗？

OCM认证考试难吗？

OCM&#xff08;Oracle Certified Master&#xff09;认证考试是Oracle公司提供的最高级别的专业认证&#xff0c;它确实被认为是非常具有挑战性的考试。以下是关于OCM认证考试难度的一些关键点&#xff1a; 深入的技术要求&#xff1a;OCM认证不仅要求考生具备Oracle数据库的…
阅读更多...
VR直播：改变我们的直播方式，让现场触手可及

VR直播：改变我们的直播方式，让现场触手可及

VR直播是近期比较火爆的一种直播方式&#xff0c;相信在抖音上我们都刷到过转动手机、变换视角的VR直播&#xff0c;因为形式比较新颖&#xff0c;用户的参与度比较高&#xff0c;一场直播下来用户的打赏也是较为可观的。 不仅仅在直播行业&#xff0c;在众多应用领域中&#…
阅读更多...
软件下载系统asp.net

软件下载系统asp.net

本项目实现电子书下载网站的功能&#xff0c;实现文章、管理员分类&#xff0c;友情连接的管理以及对前台页面的静态化。网站前台实现对电子书的详细信息介绍和提供下载。 说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a; 基于a…
阅读更多...
K8S认证|CKA题库+答案| 7. 调度 pod 到指定节点

K8S认证|CKA题库+答案| 7. 调度 pod 到指定节点

7、调度 pod 到指定节点 您必须在以下Clusterd/Node上完成此考题&#xff1a; Cluster Master node Worker node hk8s master …
阅读更多...
交换机连接方式

交换机连接方式

一、级联方式 级联是将多个交换机或其他网络设备依次连接&#xff0c;形成一个层次结构&#xff0c;从而扩展网络的覆盖范围和端口数量。 在级联连接中&#xff0c;数据信号会从一个设备依次传递到下一个设备。每个设备都会接收并处理来自上级设备的数据&#xff0c;并将其转…
阅读更多...
JVM学习-垃圾回收(三)

JVM学习-垃圾回收(三)

System.gc 通过System.gc()或Runtime.getRuntime().gc()的调用&#xff0c;会显示触发Full GC&#xff0c;同时对老年代和方法区进行回收&#xff0c;尝试释放被丢弃对象占用的内存然后System.gc()调用附带一个免责声明&#xff0c;无法保证对垃圾收集器的调用JVM实现者可以通…
阅读更多...
欢聚笔试题求助帖

欢聚笔试题求助帖

事情是这样的&#xff0c;这段时间一直在求职投简历&#xff0c;期望在暑假之前接到一份大数据开发的实习工作。投了很多公司&#xff0c;然后就收到了欢聚的笔试邀约&#xff0c;HR说要我一天之内做出来&#xff0c;恰巧第二天还有组会要汇报&#xff0c;我就先放下了&#xf…
阅读更多...
2024年信息素养大赛图形化编程、Python、算法创真题汇总

2024年信息素养大赛图形化编程、Python、算法创真题汇总

2024年信息素养大赛编程赛道初赛&#xff08;Scratch图形化编程、Python、C算法创意&#xff09;已经结束&#xff0c;根据Scratch实验室的了解全国青少年信息素养大赛初赛晋级及初赛成绩内容如下&#xff1a; 1.参赛选手将在 5 个工作日(节假日不计在内)内&#xff0c;通过信…
阅读更多...
K8s-yaml文件

K8s-yaml文件

一.Yaml文件详解&#xff1a; Kubernetes 支持 YAML 和 JSON 格式管理资源对象 JSON 格式&#xff1a;主要用于 api 接口之间消息的传递YAML 格式&#xff1a;用于配置和管理&#xff0c;YAML 是一种简洁的非标记性语言&#xff0c;内容格式人性化&#xff0c;较易读 YAML 语…
阅读更多...
汽车IVI中控开发入门及进阶（十八）：显示技术之Frame Buffer帧缓冲器

汽车IVI中控开发入门及进阶（十八）：显示技术之Frame Buffer帧缓冲器

Frame Buffer帧缓冲器（帧缓冲器，有时是帧存储器）是随机存取存储器（RAM）的一部分，包含驱动视频显示器的位图。它是一个内存缓冲区，包含表示完整视频帧中所有像素的数据。现代视频卡的核心包含帧缓冲电路。该电路将内存中的位图转换为可以在计算机监视器上显示的视频信号。…
阅读更多...
每日5题Day9 - LeetCode 41 - 45

每日5题Day9 - LeetCode 41 - 45

每一步向前都是向自己的梦想更近一步&#xff0c;坚持不懈&#xff0c;勇往直前&#xff01; 第一题&#xff1a;41. 缺失的第一个正数 - 力扣&#xff08;LeetCode&#xff09; 今天这道题没有ac&#xff0c;写不动了&#xff0c;下次再通过吧&#xff0c;先给个半成品下次回…
阅读更多...
MySQL主从复制+读写分离（ShardingJDBC）

MySQL主从复制+读写分离（ShardingJDBC）

MySQL主从复制读写分离 MySQL主从复制介绍二进制日志&#xff1a; MySQL的主从复制原理如下搭建主从复制准备工作主库配置从库配置 测试 读写分离案例ShardingJDBC介绍数据库环境初始工程导入读写分离配置测试1). 保存数据2). 修改数据3). 查询数据4). 删除数据 MySQL主从复制 …
阅读更多...
adb 汇总

adb 汇总

常用命令 adb devices 查看链接设备列表 adb kill-server 关闭并清楚所有链接 adb connect 设置链接 adb tcpip 该条命令是设置网络adb监听的端口&#xff0c;5555是默认&#xff0c;也可以设置其他的&#xff0c;在安卓设备重启后会失效&#xff0c;不需要root权限&#x…
阅读更多...
【C++】多态（多态的原理）

【C++】多态（多态的原理）

在本篇博客中&#xff0c;作者将会带领你深入理解C中的多态。 声明&#xff01;&#xff01;&#xff01;本代码以及讲解都是在32位机器下进行完成的&#xff0c;64位机器下会有所不同&#xff0c;但大同小异。 一.多态的概念 什么是多态&#xff1f; 多态就是不同的对象去做…
阅读更多...
简易CAD程序：Qt多文档程序的一种实现

简易CAD程序：Qt多文档程序的一种实现

注&#xff1a;文中所列代码质量不高&#xff0c;但不影响演示我的思路 实现思路说明 实现DemoApplication 相当于MFC中CWinAppEx的派生类&#xff0c;暂时没加什么功能。 DemoApplication.h #pragma once#include <QtWidgets/QApplication>//相当于MFC中CWinAppEx的派生…
阅读更多...
以太坊（3）——智能合约

以太坊（3）——智能合约

智能合约 首先明确一下几个说法&#xff08;说法不严谨&#xff0c;为了介绍清晰才说的&#xff09;&#xff1a; 全节点矿工 节点账户 智能合约是基于Solidity语言编写的 学习Solidity语言可以到WFT学院官网&#xff08;Hello from WTF Academy | WTF Academy&#xff09;…
阅读更多...
以x为界，分隔链表为两个分区，各分区内元素相对位置不变

以x为界，分隔链表为两个分区，各分区内元素相对位置不变

题目描述&#xff1a; 题目思路&#xff1a; 1.设置两个头指针表示两个分区&#xff0c;并对每个分区设置相对于的遍历指针&#xff0c;指向分区链表链尾 2.设置原链表的遍历指针&#xff0c;判断指针所指元素是否小于目标值x&#xff0c;小于的话将结点添加到第一个分区末尾…
阅读更多...
搭建电商电子商务平台有哪些好用的电商API数据采集接口？

搭建电商电子商务平台有哪些好用的电商API数据采集接口？

电商API接口主要用于帮助开发者将电商功能集成到自己的应用程序中&#xff0c;实现诸如商品检索、商品价格数据获取、订单处理、支付、物流跟踪等功能。以下是一些常用的电商API接口提供商&#xff1a; 主流电商平台API&#xff1a; 淘宝开放平台&#xff1a;提供淘宝、天猫、…
阅读更多...
ngnix 入门 二，docker启动nginx, 安装ssl 证书，使用配置文件，映射后端服务 ，提供给前端项目访问

ngnix 入门 二，docker启动nginx, 安装ssl 证书，使用配置文件，映射后端服务 ，提供给前端项目访问

搭建生产环境真不是人做的事&#xff0c;特别是对于一知半解的人。仅以此文献给各位技术人 说一下背景&#xff1a;项目前后端分离&#xff0c;前端 vue3 、小程序端 &#xff0c;后端 go 提供服务。 微信小程序需要使用 https 请求。 这就必须让我们想到nginx 了 想要达到的…
阅读更多...
MySQL学习之DQL语句（数据查询语言）

MySQL学习之DQL语句（数据查询语言）

准备SQL CREATE TABLE student ( id int, -- 编号 name varchar(20), -- 姓名 age int, -- 年龄 sex varchar(5), -- 性别 address varchar(100), -- 地址 math int, -- 数学 english int -- 英语 );INSERT INTO student(id,NAME,age,sex,address,math,english) VALUES (1,…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023