根据条件语句 vuejs 更改 img src

debugcn 发表于 Dev

前台员工

我正在构建一个单选按钮，当未选中该按钮时，它使用默认图像（black-radio.png 或 white-radio.png 不带复选标记），否则他们使用 black-radio-checked.png 或 white-radio-checked .png。但真的坚持这个错误。我知道有一个选项可以使用计算属性，但我应该如何解决这个问题？

在此处输入链接描述

var vm = new Vue({
    el: '#colorPicker',
    data: {
        color: 'black',
        colors: [
            {
                name: 'black',
                image: 'images/black-radio.png',
                image_checked: 'images/black-radio-checked.png'
            },
            {
                name: 'white',
                image: 'images/white-radio.png',
                image_checked: 'images/white-radio-checked.png'
            }
        ]
    }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" type="text/javascript"></script>

<div id="colorPicker">				
<div class="display-inline-block">
    <label :for="colorInfo.name" v-for="(colorInfo, index) in colors">
      <input type="radio" name="color" v-model="color" :id="colorInfo.name" class="wireless-headphone-new-input" :value="colorInfo.name"/>
      <img :src="'images/' + colorInfo.name + '-radio.png'">
    </label>
  <div class="confirmation-color capitalize">{{ color }}  </div>
</div>
</div>

伸出援手

Whenever a radio button is checked, this.colorvalue is updated.
因此，v-if检查color==colorInfo.name以显示image_checked所选单选按钮的字段并v-else显示带有image字段的其他按钮将起作用。

var vm = new Vue({
    el: '#colorPicker',
    data: {
        color: '',
        colors: [
            {
                name: 'black',
                image: 'images/black-radio.png',
                image_checked: 'images/black-radio-checked.png'
            },
            {
                name: 'white',
                image: 'images/white-radio.png',
                image_checked: 'images/white-radio-checked.png'
            }
        ]
    }
    
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" type="text/javascript"></script>

<div id="colorPicker">				
<div class="display-inline-block">
    <label :for="colorInfo.name" v-for="(colorInfo, index) in colors">
      <input type="radio" name="color" v-model="color" :id="colorInfo.name" class="wireless-headphone-new-input" :value="colorInfo.name"/>
      <img v-if="color==colorInfo.name" :src="colorInfo.image_checked">
      <img v-else :src="colorInfo.image"/>
    </label>
  <div class="confirmation-color capitalize">{{ color }}  </div>
  
</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-21

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

根据条件语句 vuejs 更改 img src

根据条件语句 vuejs 更改 img src

根据类更改img src

根据img src更改后台JQuery

更改img单击img上的img src

jQuery / Javascript使用IF / ELSE语句更改img SRC

使用JavaScript根据引荐来源网址更改IMG SRC

jQuery：根据下拉选择的值动态更改img src

JavaScript自动更改img src

Thymeleaf条件img src

更改img onclick的href和src

jQuery如何更改img src路径onclick？

img src更改时触发事件

无法使用JavaScript更改img元素的src

从父锚href更改img src

更改通过appendTo创建的img src

用输入文件更改img标签的src

如何使用JavaScript更改img src？

不循环浏览img .src，更改“点击”

img src更改时触发事件

使用javascript单击更改img src

更改src img指令或过滤角度

Javascript更改img src不起作用

从父锚href更改img src

Javascript在加载时更改img src

在 JQuery 中动态更改 img src 属性

单击 jquery 时更改 img src

当我知道 <img> id 时如何更改 <img> 的 src？

更改img src单击侦听器以更改第二个img src

Img src值在更改动态内容时不会更改

img更改src属性时css的最高值更改