vue.js - 基于 bool 值的 Vue 条件图像源

Question

我目前的图片标签设置如下:

<img v-if="highQuality" :src="post.data.url">
<img v-if="highQuality == false" :src="post.data.thumbnail">

如您所见，图像 src 根据 highQuality 是真还是假而变化。

我有一个带有两个 bool 选项的 select 标签，如果我从 false 开始并将其更改为 true，它会将图像更新为高质量来源，但如果我将其设置回 false，它似乎会保持高质量。所以我认为如果有条件的话，这是对 vue 的一次糟糕尝试。

有没有更像“Vue”的写法？

编辑:额外代码

DOM

<select v-model="highQuality">
     <option value="true">High Quality</option>
     <option value="false">Low Resolution</option>
</select>

JS

var app = new Vue({
        el: '#app',
        data: {
            highQuality: false,
            posts: [],
        },
});

Answer 1

也许 highQuality == false 条件失败了，您确定要将 highQuality 设置为完全 false 吗？

您不需要复制标签，只需这样做:

<img :src="highQuality ? post.data.url : post.data.thumbnail">