根据选择的无线电输入显示图像答案

【问题标题】：Show image based on chosen radio input根据选择的无线电输入显示图像
【发布时间】：2017-01-12 21:16:32
【问题描述】：

正如标题所说，如何在 VueJS 中实现这一点

有起点https://jsbin.com/tomevukisa/edit?html,js,output

我猜这是关于索引匹配的事情，因为我以这种方式对 jQuery 做了类似的事情

  $('.Colors > li').on('mouseenter', function() {
    var i = $(this).index();
    $('.Items > li.active').fadeOut(200, function() {
      $(this).removeClass('active').parent('ul').children('li').eq(i).fadeIn(100).addClass('active');
    });
  });

但现在只涉及 VueJS。

谢谢。

【问题讨论】：

您的实际问题是什么？你有什么问题？
@EvanKnowles 我需要一些指南（提示）如何根据选择的无线电输入显示图像。它们应该按索引匹配。
vuejs.org/guide/forms.html#Radio
v-model 在单选按钮上，几个 v-ifs 基于结果值。

标签： javascript vue.js

【解决方案1】：

您需要为单选按钮指定value。既然要根据$index进行比较，那就是要设置的值。

<input type="radio" name="color" value="{{$index}}" v-model="picker">

要控制是否显示某些内容，请使用v-show binding：

v-show="+$index === +picker"

我使用一元 + 来确保两者都是数字。

new Vue({
  
  el: 'body',
  
  data: {
    picker: 1,
    images: [
      {img_src: 'http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg'},
      {img_src: 'http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg'},
      {img_src: 'http://scr.templatemonster.com/35100/35151_gall_nature_small_3.jpg'}
    ],
    colors: [
      {id: 1, name: 'Black'},
      {id: 2, name: 'Red'},
      {id: 3, name: 'Green'}
    ]
  }
  
});

ul {
  list-style: none;
}
ul li img {
  width: 110px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<ul class="Items">
    <li v-for="image in images">
      <img v-show="+$index === +picker" :src="image.img_src" >
    </li>
  </ul>
  
  <ul class="Colors">
    <li v-for="color in colors">
      <input type="radio" name="color" value="{{$index}}" v-model="picker">
      <span>{{ color.name }}</span>
    </li>
  </ul>

【讨论】：