Skip to content

Instantly share code, notes, and snippets.

@yyx990803
Created October 16, 2017 13:34
Show Gist options
  • Save yyx990803/6bb660f95ee4d1e89878a0a37bbb52b3 to your computer and use it in GitHub Desktop.
Save yyx990803/6bb660f95ee4d1e89878a0a37bbb52b3 to your computer and use it in GitHub Desktop.
<script src="https://unpkg.com/vue"></script>
<style>
.done {
text-decoration: line-through;
}
</style>
<div id="app">
<p>
<label v-for="m in modes">
<input type="radio" :value="m" v-model="mode"> {{ m }}
</label>
</p>
<input
v-model="newTodo"
@keyup.enter="addNewTodo">
<ul>
<li v-for="todo in filteredTodos"
:class="{ done: todo.done }"
@click="toggleTodo(todo)">
{{ todo.text }}
</li>
</ul>
</div>
<script>
const vm = new Vue({
data: {
modes: ['all', 'done', 'not done'],
newTodo: '',
// Source state
mode: 'all',
todos: [
{ text: 'Learn JavaScript', done: true },
{ text: 'Learn Vue', done: false }
]
},
computed: {
// Derived state
filteredTodos () {
switch (this.mode) {
case 'done':
return this.todos.filter(todo => todo.done)
case 'not done':
return this.todos.filter(todo => !todo.done)
default:
return this.todos
}
}
},
methods: {
toggleTodo (todo) {
todo.done = !todo.done
},
addNewTodo () {
const newTodo = {
text: this.newTodo,
done: false
}
this.todos.push(newTodo)
this.newTodo = ''
}
}
}).$mount('#app')
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment