Question

正如标题所说，如何在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。

感谢。

Answer 1

您需要为单选按钮指定value。由于您要根据$index进行比较，因此需要设置值。

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

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

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

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

＆＃13;

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'}
    ]
  }
  
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: