Vue CLI 背景色
App.vue<script setup>import hoge from './components/hoge.vue'</script><template><body> <div class="body0"> <hoge /> </div></body></template><style>body { background-color: lightgreen; }</style>hoge.vue<script setup>import jpgfile0 from "@/assets/hoge.jpg"defineProps({ msg: String,})</script><script>import axios from "axios";import { reactive } from "vue";const data = reactive({ responses: "", keyWord: "",});const getData = async () => { var url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/" +area.value+".json"; let result = await axios.get(url, {params: {prompt: data.keyWord}}); data.responses = result.data;};</script><template> <label for="area">地域を選択してください</label><select id="area"> <option value="020000">青森県</option> <option value="050000">秋田県</option> </select> <h1>{{ msg }}</h1> <button @click="getData">天気取得</button> <hr> <div class="resp"> {{ data.responses.text }} </div></template><style>.resp { background-color: lightblue;}</style>
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・ＴＶ
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
