Skip to content

Instantly share code, notes, and snippets.

@lshapz

lshapz/cats.html

Created August 28, 2017 16:02
Show Gist options
  • Save lshapz/fabe516b720bdfb9099b811ee64a7f33 to your computer and use it in GitHub Desktop.
Save lshapz/fabe516b720bdfb9099b811ee64a7f33 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lshapz created this gist Aug 28, 2017.
    51 changes: 51 additions & 0 deletions cats.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    <style>
    ul {
    list-style-type: none;
    }

    </style>

    <div id="app">
    <component :is="currentView"></component>

    <ul>
    <li role="presentation">
    <a href="#" @click="currentView='my-component'">SHOW KITTY</a>
    </li>

    <li role="presentation">
    <a href="#" @click="currentView='your-component'">SHOW PUPPY</a>
    </li>
    </ul>
    <div>
    <input type="text" v-model="input_val">
    Input Value: <span v-text="input_val"></span>
    </div>

    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
    Vue.component('my-component', {
    template: '<div><h1>{{message}}</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/zusn3JtpFDk" frameborder="0" allowfullscreen></iframe></div>',
    data: function(){
    return {
    message: "LOOK AT THIS CAT"
    }
    }
    })
    Vue.component('your-component', {
    template: '<div><iframe width="560" height="315" src="https://www.youtube.com/embed/LaYPWtNvJ-A" frameborder="0" allowfullscreen></iframe><h1>{{message}}</h1></div>',
    data: function(){
    return {
    message: "LOOK AT THAT DOG"
    }
    }
    })
    new Vue({
    el: '#app',
    data: {
    currentView: "my-component",
    input_val: "fishes?"
    }
    })
    </script>