Created
April 27, 2018 14:33
-
-
Save Fcmam5/70c9f3f2390c4728eb9d0873baa35be6 to your computer and use it in GitHub Desktop.
Quick example for a friend during Hack!T.
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Hello Slider</title> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div class="slider"> | |
| <h1>{{ table[i].title }}</h1> | |
| <p>{{ table[i].content }}</p> | |
| <button type="button" name="button" v-on:click="increment" :disabled="i === table.length-1">Next</button> | |
| <button type="button" name="button" v-on:click="decrement" :disabled="i === 0">Previews</button> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/vue"></script> | |
| <script type="text/javascript"> | |
| var object1 = { | |
| title: 'Hello Africa', | |
| content: 'Oh! This is Africaaa !' | |
| }; | |
| var object2 = { | |
| title: 'I love محاجب', | |
| content: 'Delicious food' | |
| }; | |
| var object3 = { | |
| title: 'Another awesome example', | |
| content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elitone?' | |
| } | |
| // Vuejs application | |
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| i: 0, | |
| table: [object1, object2, object3] | |
| }, | |
| methods: { | |
| increment: function() { | |
| this.i++; | |
| }, | |
| decrement: function() { | |
| this.i--; | |
| }, | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment