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”的书写方式吗？

编辑：额外的代码

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>上。 <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>

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

2 个答案: