javascript - 根据数据改变背景(Vue3)

Question

我正在制作一个天气应用程序，但不明白为什么我的代码没有更改背景图片。

应用代码笔:https://codepen.io/Link0w0/pen/ZEeBaOj

我添加的用于更改背景的代码:

<div id="app" :class="typeof weather.main != 'undefined' && weather.main.temp > 16 ? 
    'warm' : ''">

  #app.warm {
  background-image: url('https://images.unsplash.com/photo-1581205135021-fbad89f942a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2894&q=80')
     background-size: cover;
  background-position: bottom;
}

Answer 1

您在 codepen 上的代码有几个错误:

1. 改变

<div id="app" :class="typeof weather.main != 'undefined' && weather.main.temp > 16 ? 'warm' : ''">

到

<div id="app" :class="weather.main && weather.main.temp > 16 ? 'warm' : ''">

1. 你有一个关闭</div>紧接着 <div id="app" ...片段。在结束后移动此结束标记 </main>标签。

这是一个带有模拟 weather 的工作示例目的: https://codepen.io/sandmaan/pen/oNZBbYY