16 Feb 2021

Vuejs Tabbed Interface Example / Tutorial | Vue component Element


In this post l am going to create an application with Vuejs - A tabbed interface. We have use a special Vue element that's v-component . From this tutorial, you can know the power or use of component element of Vue .
<component/> is a special Element to use that is predefined in Vuejs Framework. By which you can attach any Registered Vue Component daynamically on applied condition.

<div id="app" class="m-5">

<span  
        v-for="tab in tabs"
        v-on:click="currentTab = tab"
        class='btn d-inline-block border border-primary'
        >
    {{tab}}
</span>

<component class="card card-body" v-bind:is='currentTabComponent'> </component>


Vue.component("Blogger", {
      template: '<div> Create free blog in your reginal language! </div>'
  });
  
  Vue.component("Vuejs", {
      template: '<div> Vue js is alternative to Facebook Inc. powered React.js a framework. Its size is 20KB with gziped. Which provides lighting☇ speed to your project. </div>'
  });
  
  Vue.component("Boostrap", {
      template: '<div> Boostrap is a great framework for web devlopment of HTML, CSS & JavaScript. It was firstly introduced by Twitter.  </div>'
  });
  
  let vue = new Vue({
          el : "#app",
        data :  {
            currentTab : "Blogger",
            tabs : ["Blogger", "Vuejs", "Boostrap"]
          },
          computed : {
              
          currentTabComponent : function (){
                  
              return this.currentTab;
                  
              }
              
          }
          
      });

Live Preview
{{tab}}

Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE