Skip to content

Instantly share code, notes, and snippets.

@ohiosveryown
Last active November 5, 2018 16:34
Show Gist options
  • Save ohiosveryown/da9de097c069c242ca0da3462ac9ac30 to your computer and use it in GitHub Desktop.
Save ohiosveryown/da9de097c069c242ca0da3462ac9ac30 to your computer and use it in GitHub Desktop.
vue click bind
<!-- layout -->
<template>
<router-link to="/">
<div class="mw-grid debug">
test
<img v-bind:class="{ triggerActive: move }" @click="move = !move" class="debug center" src="http://i.imgur.com/JQaaf8q.jpg" alt="">
</div>
</router-link>
<!-- <div class="colophon-trigger f-sm uc" @click="$event.target.classList.toggle('red')">colophon</div> -->
</template>
<!-- styles -->
<style lang="scss" scoped>
@import '../../utilities/breakpoints';
@import '../../utilities/variables';
@import '../../utilities/utilities';
@import '../../utilities/typography';
.center {
position: absolute;
left: 50%;
transform: translateX(-30%);
transition: $ease;
}
.triggerActive { transform: translateX(0); }
</style>
<!-- logic -->
<script>
// import year from './components/calendar'
export default {
name: 'test',
// components: { year }
data() {
return {
move: false,
};
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment