#Quni / Vue Links

Tutorials of (#quni / vue links) by Quni jhuang

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>#Quni / Vue Links</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1>Vue Links</h1>
<!-- 寫法 1 -->
<!-- <div id="mainnav">
  <ol>
    <li v-for="(todo, key) in todos">
      <a :href="todo.link" :class="key == 0 ? 'current' : ''">{{ todo.name }}</a>
    </li>
  </ol>
</div> -->

<!-- 寫法 2 -->
<div id="mainnav">
	<a v-for="(todo, key) in todos" :class="key == 0 ? 'current' : ''" :href="todo.link">{{ todo.name }}</a>
</div>
  <script src='https://unpkg.com/vue/dist/vue.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  font-family: "Raleway";
  font-size: 0.8rem;
  background-color: #222;
}

a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s;
}

h1 {
  text-align: center;
  font-size: 2rem;
  font-weight: 100;
  color: #fff;
  margin-top: 4rem;
}

#mainnav {
  display: table;
  width: 600px;
  margin: 5rem auto;
}
#mainnav li {
  display: inline-block;
  min-width: 200px;
  text-align: center;
}

a {
  background-color: #9f7f5e;
  padding: 0.8rem 2rem;
  margin: 5rem;
}
a:hover {
  background-color: #7f654b;
}
/* Downloaded from https://www.codeseek.co/ */
var menu = new Vue({
  el: '#mainnav',
  data: {
    todos: [
      { name: 'ABOUT', link: '#' },
      { name: 'PRODUCTS', link: '#' },
      { name: 'CONTACT', link: '#' }
    ]
  }
})

This awesome code ( #Quni / Vue Links ) is write by Quni Jhuang, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Quni Jhuang