时间戳

首页 > 解决方案 > Vue：如何根据 RadioButton 选择显示不同的图像

javascript - Vue：如何根据 RadioButton 选择显示不同的图像

问题描述

如果使用 Vuejs 选择了单选按钮，我将面临一个问题，我想显示不同的图像。它目前只显示错误状态的图像，因为我似乎无法以我尝试的方式检索按钮的状态。这是一个带有两个按钮的示例：

<template>
  <div id="choose-route">
    <label>
      <input type="radio" name="Radio" id="choice1"
        v-on:change="someMethodOne"
      />
      <img
        :src="checked ? 'icon_checked.png' : 'icon.png'"
      />
    </label>
    <label>
      <input type="radio" name="Radio" id="choice2"
        v-on:change="someMethodTwo"
      />
      <img
        :src="checked ? 'different_icon_checked.png' : 'different_icon.png'"
      />
    </label>
  </div>
</template>

<script>
export default {
  methods: {
    someMethodOne () {
      // does something
    },
    someMethodTwo () {
      // does another thing
    }
  }
}
</script>

<style>
</style>

如何根据单选按钮的选中状态更改图像？我已经使用 CSS 完成了它，但是由于我使用递归组件，这导致了另一个问题，这就是我现在在这里的原因。

标签： javascripthtmlvue.js

解决方案

使用v-model. 当值改变时，你也可以watch用来做一些事情。checked

Vue.js 的网站上有这个确切的例子。

https://vuejs.org/v2/guide/forms.html#Radio

new Vue({
  el: "#app",
  data: {
    checked: null
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

  <div id="app">
      <input type="radio" id="one" value='One' v-model="checked">
      <label for="one">Option one</label>
      
      <br>
      
      <input type="radio" id="two" value="Two" v-model="checked">
      <label for="two">Option two</label>
      
      <br>
      
      <span>Checked: {{ checked }}</span>
      
      <br>
      
      <span v-if="checked === 'One'">One is checked!</span>
      <span v-else-if="checked === 'Two'">Two is checked!</span>
  </div>

推荐阅读