v-如果多个条件不起作用

Question

<template>\n<div>\n    <h2>{{weatherData.city}}</h2>\n    <h3>{{weatherData.weather}}</h3>\n    <rain-cloud v-if="iconSelect===\'09d\'"/>\n    <sun-cloud v-if="iconSelect===\'04d\'"/>\n    <sunshine v-if="iconSelect==\'01d\'"/>\n    <thunder-cloud v-if="iconSelect==\'11d\'"/>\n    <windy-cloud v-if="iconSelect==\'50d\'"/>\n    <snow-cloud v-if="iconSelect==\'13d\'"/>\n    <div class="container">\n        <h2>{{weatherData.temperature}}\xc2\xb0C</h2>\n        <h4>max temperature: {{weatherData.tempMax}}\xc2\xb0C</h4>\n        <h4>min temperature: {{weatherData.tempMin}}\xc2\xb0C</h4>\n        <h4>humidity: {{weatherData.humidity}}%</h4>\n    </div>\n</div>\n</template>\n\ncomputed:{\n        iconSelect(){\n            if(this.weatherData.icon==="04n" || "04d"){\n                this.weatherData.icon="04d"\n            }\n            else if(this.weatherData.icon==="01d"|| "01n"){\n                this.weatherData.icon="01d"\n            }\n            else if(this.weatherData.icon==="11d"|| "11n"){\n                this.weatherData.icon="11d"\n            }\n            else if(this.weatherData.icon==="50d"|| "50n"){\n                this.weatherData.icon="50d"\n            }\n            else if(this.weatherData.icon==="13d"|| "13n"){\n                this.weatherData.icon="13d"\n            }\n            else if(this.weatherData.icon==="09d"||"09n"||"10d"||"10n"){\n                this.weatherData.icon="09d"\n            }\n            return this.weatherData.icon\n }\n

\n\n

每个组件都是 SVG 动画。当陈述为真时，我只想渲染一个。但 v-if 不支持乘法条件。有任何想法吗？每种天气都有图标代码，例如“01d”和“01n”表示白天和夜间天气晴朗。但我只能使用一个 SVG

\n

Answer 1

v-if确实支持多个条件 - 例如，假设您有：

new Vue({
  el: '#app',
  data: {
    x: 1,
    y: 2
  }
})

您可以编写如下语句：

<div v-if="x === 1 || y === 3">
...
</div>

Vue 还提供了v-else-if="condition"和v-else指令。

你的内部条件也有问题iconSelect()。您已按照以下格式编写了您的条件：if(this.weatherData.icon === "04n" || "04d")

此条件将始终计算为true，因为即使weatherData.icon === "04n"为 false（weatherData.icon设置为其他值），"04d"也会计算第二个表达式 - 并且它的计算结果为"04n"，在条件上下文中相当于true。

为了使这些条件按照您的预期工作，它们应该采用以下格式：

if(this.weatherData.icon === "04n" || this.weatherData.icon === "04d")

或者，在您的 中<template>，您需要v-if类似地更改您的条件：

<sun-cloud v-if="iconSelect === '04d' || iconSelect === '04n'"></sun-cloud>