Vue

by ChangJoo Park

HTML

<div id="app">
  <asdie>
    <ul>
      <li v-if="isNewList">
        <input type="text" v-model="newListName">
        <button @click="isNewList=false;">O</button>
        <button @click="isNewList=false;">X</button>
      </li>
      <li v-else @click="isNewList=true">New List</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: '',
      list: []
		}
  },
  watch: {
  	isNewList (val) {
      
		}
  },
  methods: {
  	doneNewListForm () {
    	this.isNewList = false
    },
  	onSave () {
	    	
    },
    onCancel () {
    
    }
	}
})