Created
March 14, 2021 16:53
-
-
Save mqxu/e97dedd43a048821829ba8c0065aab3d to your computer and use it in GitHub Desktop.
Vue + Pug to-do (with transitions)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
main#app.container | |
div.section | |
form(@submit.prevent="addItem") | |
label.label Add another | |
div.field.has-addons | |
div.control | |
input.input(required, autofocus, v-model="newItem", placeholder="Remake this in React") | |
button(type="submit").button.is-info | |
i.fa.fa-plus | |
span Add | |
transition(name="slide") | |
div(v-show="items.length > 0") | |
hr | |
ul | |
transition-group(name="slide") | |
li(v-for="(item, index) in items", :key="item.id") | |
button(@click="removeItem(index)").button.is-danger | |
i.fa.fa-trash | |
span(v-text="item.desc") | |
hr | |
span(v-text="'Total: ' + items.length") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
new Vue({ | |
el: '#app', | |
data: { | |
items: [ | |
{id: 1, desc: "Lorem"}, | |
{id: 2, desc: "Ipsum"}, | |
{id: 3, desc: "Dolor"}, | |
], | |
newItem: '', | |
}, | |
methods: { | |
addItem () { | |
const id = this.items.length + 1 | |
this.items.push({id, desc: this.newItem}) | |
this.newItem = '' | |
}, | |
removeItem (index) { | |
this.items.splice(index, 1) | |
}, | |
}, | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
li | |
align-items center | |
display flex | |
margin-bottom 10px | |
button | |
margin-right 5px | |
.slide-enter-active, | |
.slide-leave-active | |
transition-duration .5s | |
.slide-enter, | |
.slide-leave-to | |
opacity 0 | |
transform translateX(100%) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment