Vue

by Dedi Wibisono

HTML

<div id ="skill">

<div class="c-skills">
  <a href="#" @click="show(1)">CSS</a>
  <a href="#" @click="show(2)">JS</a>
  <a href="#" @click="show(3)">HTML</a>
  <a href="#" @click="show(4)">Tools</a>
  <a href="#" @click="show(5)">General</a>
</div>         

<div>
      <h4>{{ skill.title }}</h4>
      <ul v-html="skill.items"></ul>
</div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue ({
  el: '#skill',
  data () {
    return {
    skill:{title:'',items:''},
      skills: [
        {
          id: 1,
          title: 'css',
          items: '<li>CSS 3</li><li>Sass/Less</li><li>CSS Animations</li><li>CSS Frameworks : Bootstrap, Zurb Foundation, Bulma, Material Design</li>',
        },
        {
          id: 2,
          title: 'js',
          items: '<li>Vanilla JS</li><li>jQuery</li><li>Angular JS</li><li>Vue JS</li><li>Ajax</li><li>JSON</li>',
        },
        {
          id: 3,
          title: 'html',
          items: '<li>HTML 5</li><li>SVG Animation</li><li>Canvas</li>',
        },
        {
          id: 4,
          title: 'general',
          items: '<li>Responsive Web Design</li><li>Adaptive Web Design</li><li>Hybrid Mobile App</li><li>Wordpress Template</li><li>Email Template</li>',
        },
        {
          id: 5,
          title: 'tools',
          items: '<li>Git</li><li>Gulp/Grunt</li><li>Npm</li><li>Webpack</li><li>Bower</li><li>Sketch</li><li>Adobe XD</li><li>Adobe Illustrator</li><li>Adobe Photoshop</li><li>InVision</li><li>Marvel</li>',
        }
      ]
    }
  },
  methods: {
    show(x){

      for (var i =0; i<=this.skills.length; i++) {

        if (x == this.skills[i].id){
          this.skill.title = this.skills[i].title;
          this.skill.items = this.skills[i].items;
        }
      }       
   }      
  }
});