// assign event handler to each hyperlink which themselves have a dataset attribute to aid identification
document.querySelectorAll('a[data-dir]').forEach( a=>a.addEventListener('click',function(e){
    // the css class that will be assigned to indicate selected item
    const cn='active';

    let ul=this.parentNode.querySelector('ul');
    let col=Array.from( ul.querySelectorAll('li') );
    
    // prevent highlist disappearing
    if( ( ul.querySelector('li.active')==ul.lastElementChild && this.dataset.dir=='down' ) || ( ul.querySelector('li.active')==ul.firstElementChild && this.dataset.dir=='up' ) )return false;


    // If no active element is found, make the first LI active.
    if( !ul.querySelector('li.active') )ul.firstElementChild.classList.add( cn );
    else{
        // otherwise process all LI elements until we find the active element
        col.some( li=>{
            if( li.classList.contains(cn) ){
                // clear an other instances of the active class
                col.forEach(n=>n.classList.remove(cn));
                    
                // highlight appropriate previous/next LI element
                switch( this.dataset.dir ){
                    case 'up':
                        if( li.previousElementSibling!=null && li.previousElementSibling.tagName=='LI' )li.previousElementSibling.classList.add(cn)
                    break;
                    case 'down':
                        if( li.nextElementSibling!=null && li.nextElementSibling.tagName=='LI' )li.nextElementSibling.classList.add(cn);
                    break;
                }
                return true;
            }
        });
    }
}));

.main ul {
  min-height: 100px;
  width: 200px;
  background: gray;
  overflow:hidden;
  list-style:none inside;
}
.main a {
  margin: 10px 0;
}
li{
  padding:0.25rem;background:whitesmoke;
}
.active{
  background:pink;
}

<div class="main">
  <a href="#" data-dir='up'>Up</a>
  <ul>
    <li>dropdown 1</li>
    <li>dropdown 1</li> 
    <li>dropdown 1</li>
    <li>dropdown 1</li>
    <li>dropdown 1</li>
    <li>dropdown 1</li>
    <li>dropdown 1</li>
    <li>dropdown 1</li>
    <li>dropdown 1</li>
    <li>dropdown 1</li>
    <li>dropdown 1</li>
    <li>dropdown 1</li>
  </ul>
  <a href="#" data-dir='down'>Down</a>
</div>

new Vue({
  el: "#app",
  data: {
    selected:2,
    times: [
      "11:00am",
      "10:00am",
      "9:00am",
      "8:00am",
      "7:00am",
      "6:00am"
    ]  
  },
  methods: {
    up: function(){
        this.selected--;
    },
    down: function(){
        this.selected++;
    }
  }
})

ul {
width:100px;
}
li.active {
background-color:lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Times:</h2>
  <span v-on:click="up">Up</span>
  <ul>
    <li v-for="(time, index) in times" :class="{ active : selected == index}">
      {{time}}
     </li>
   </ul>
   <span v-on:click="down">Down</span>
</div>