Vue

by ChangJoo Park

HTML

<div id="app">
  <asdie>
    <ul>
      <li v-if="isNewList" @click="toggleNewList">New List</li>
      <li v-else>
        <input type="text" v-model="newListName">
      </li>
      <li>Menu One</li>
    </ul>
  </asdie>
  <main>
    <h1>Hello World</h1>
  </main>
</div>

CSS

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

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

#app aside {
  flex: 1;
  border-right: 1px solid black;
}

#app main {
  flex: 3;
}

Vue

new Vue({
  el: "#app",
  data: function () {
  	return {
    	isNewList: false,
    	newListName: ''
		}
  }
})