Question

我正在寻找img标签可选。我的意思是如果选择或取消选择照片，则获取布尔值true / false。有什么想法吗？

<h2 class="headline mb-2 text-xs-center">Choose your hero:</h2>
<v-layout row wrap primary-title v-for="hero in heroes" :key="hero.id">
  <v-flex xs6>
    <v-avatar size="80px" class="grey lighten-1">
      <img v-bind:src="`${hero.href}`" alt="avatar">
    </v-avatar>
  </v-flex>
  <v-flex xs6 class="text-xs-right">
    <v-subheader>{{hero.name}}€</v-subheader>
  </v-flex>
</v-layout>
</v-card>
</template>

<script>
  export default {

      data: () => ({

          bases: [{
              id: 1,
              name: "Spiderman",
              href: "../../static/spiderman.jpg"
          }, {
              id: 2,
              name: "Batman",
              href: "../../static/batman.jpg"
          }]
      })
  }
</script>

Answer 1

这是一个可以选择的简单示例

<script>
    export default {
        data(){
            return {
                //...
            }
        },
        methods: {
            selectHero(hero){
                this.$set(hero, 'selected', (hero.selected ? false:true)) //!hero.selected
            }
        }
    }
</script>

模板中的

<img :src="hero.href" alt="avatar" :class="{selected: hero.selected}" @click="selectHero(hero)">

如果您只想选择一个项目

<script>
    export default {
        data(){
            return {
                //...
                selectedHero: {}
            }
        },
        methods: {
            getSelectedHero(){
                return this.selectedHero;
            }
        }
    }
</script>

<img :src="hero.href" alt="avatar" :class="{selected: selectedHero.id == hero.id}" @click="selectedHero = hero">

<style>
    img.selected{
        border: solid 2px green;
        /* and other styles ... */
    }
</style>

Vue js图像可选

1 个答案: