Skip to content

Instantly share code, notes, and snippets.

@ryerh
Last active April 7, 2016 08:43
Show Gist options
  • Save ryerh/16e1301a2afe1bab4111c59d9751e576 to your computer and use it in GitHub Desktop.
Save ryerh/16e1301a2afe1bab4111c59d9751e576 to your computer and use it in GitHub Desktop.
<div id="app">
<h1 @click="toggleAppDesc">{{ appTitle }}</h1>
<p v-if="toggleAppDesc">A simple Todo List app to demostrate how Vue.js works.</p>
<input type="text" v-model="newTodo" @keyup.enter="addTodo">
<ul>
<li v-for="todo in todoList">
<h2>{{ todo.title }}</h2>
<p>{{ todo.desc }} <button @click="delTodo($index)">&times;</button></p>
</li>
</ul>
</div>
<script src="//cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
appTitle: 'Todo List',
newTodo: '',
toggleAppDesc: true,
todoList: [
{title: '1', desc: 'todo1'},
{title: '2', desc: 'todo2'},
{title: '3', desc: 'todo3'},
{title: '4', desc: 'todo4'}
]
},
methods: {
delTodo ($index) {
this.todoList.splice($index, 1);
},
addTodo () {
this.todoList.push({
title: this.newTodo.length,
desc: this.newTodo.split(',').pop()
});
this.newTodo = '';
},
toggleAppDesc () {
this.toggleAppDesc = !this.toggleAppDesc;
}
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment