带有基于布尔值的 Vue 的条件图像源

Question

我目前的图像标签设置如下：

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

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

我有一个带有两个布尔选项的选择标签，如果我从 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">

Answer 2

问题是你的<option>s。<select>分配的是字符串，而不是布尔值。

请勿使用：

<option value="true">High Quality</option>

用：

<option :value="true">High Quality</option>

问题：

var app = new Vue({
el: '#app',
data: {
highQuality: false,
posts: [],
post: {data: {url: 'http://bc.id.au/images/fr_flag.gif', thumbnail: 'http://bc.id.au/images/de_flag.gif'}}
},
});

<script src="https://unpkg.com/vue"></script>
<div id="app">
<select v-model="highQuality">
<option value="true">High Quality</option>
<option value="false">Low Resolution</option>
</select>
<img v-if="highQuality" :src="post.data.url">
<img v-if="highQuality == false" :src="post.data.thumbnail">
</div>

固定：

var app = new Vue({
el: '#app',
data: {
highQuality: false,
posts: [],
post: {data: {url: 'http://bc.id.au/images/fr_flag.gif', thumbnail: 'http://bc.id.au/images/de_flag.gif'}}
},
});

<script src="https://unpkg.com/vue"></script>
<div id="app">
<select v-model="highQuality">
<option :value="true">High Quality</option>
<option :value="false">Low Resolution</option>
</select>
<img v-if="highQuality" :src="post.data.url">
<img v-if="highQuality == false" :src="post.data.thumbnail">
</div>