Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Vue.js To-Do List</title>
- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
- </head>
- <body>
- <div id="app">
- <h1>Vue.js To-Do List</h1>
- <input type="text" v-model="newTodo" @keyup.enter="addTodo">
- <ul>
- <li v-for="(todo, index) in todos" :key="index">
- {{ todo }}
- <button @click="removeTodo(index)">X</button>
- </li>
- </ul>
- </div>
- <script>
- var app = new Vue({
- el: '#app',
- data: {
- newTodo: '',
- todos: []
- },
- methods: {
- addTodo: function() {
- if (this.newTodo !== '') {
- this.todos.push(this.newTodo);
- this.newTodo = '';
- }
- },
- removeTodo: function(index) {
- this.todos.splice(index, 1);
- }
- }
- })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement