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

debugcn 发表于 Dev

戴夫·米特小屋

我遇到一个问题，如果用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做到了，但是由于我使用递归组件，这又导致了另一个问题，这就是我现在在这里的原因。

欧文

使用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>

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

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