一个todolist

news/2024/7/9 23:59:34 标签: vue


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
    <div id="todo-list-example">
        <form v-on:submit.prevent="addNewTodo">
          <label for="new-todo">Add a todo</label>
          <input
            v-model="newTodoText"
            id="new-todo"
            placeholder="E.g. Feed the cat"
          />
          <button>Add</button>
        </form>
        <ul>
          <todo-item
            v-for="(todo, index) in todos"
            :key="todo.id"
            :title="todo.title"
            @remove="todos.splice(index, 1)"
          ></todo-item>
        </ul>
      </div>
 

<script>
const app = Vue.createApp({
  data() {
    return {
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: 'Do the dishes'
        },
        {
          id: 2,
          title: 'Take out the trash'
        },
        {
          id: 3,
          title: 'Mow the lawn'
        }
      ],
      nextTodoId: 4
    }
  },
  methods: {
    addNewTodo() {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

app.component('todo-item', {
  template: `
    <li>
      {{ title }}
      <button @click="$emit('remove')">Remove</button>
    </li>
  `,
  props: ['title'],
  emits: ['remove']
})

app.mount('#todo-list-example')
</script>


    <style>
        .demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
    </style>
</body>
</html>

一个todolist

相关文章

Windows下anaconda安装opencv

组件prop的用法：为什么没有运行处hello，哪里错了

使用Python和OpenCV检测图像中的物体并将物体裁剪下来

这段也没有显示出来，控制台里也没有显示出来

csdn怎么快速转载别人的文章

idea 打开Service窗口--一个管理所有服务的地方

bug:vue@next:1287 [Vue warn]: Failed to resolve component: date-picker at ＜App＞

Tensorboard生成的网址（localhost或者127.0.0.1）打不开的解决方法