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

Posted 2023-02-22

【中文标题】根据选择的无线电输入显示图像

【英文标题】：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 基于结果值。

【参考方案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>