AI vue 通义灵码

阿里的通义灵码Ai写一段vue.js代码是怎么样的？

发布于 2024-04-12 21:33:34

通义灵码

当然可以。这里为您编写一段基础的 Vue.js 代码，它创建了一个简单的待办事项（To-Do）应用，实现了添加、删除和标记完成任务的功能。假设您已通过 CDN 引入了 Vue.js 库。

html<!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 App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <style>
    .completed {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>To-Do List</h1>

    <form v-on:submit.prevent="addTask">
      <input type="text" v-model="newTask" placeholder="Add new task" required>
      <button type="submit">Add</button>
    </form>

    <ul>
      <li v-for="(task, index) in tasks" :key="index" :class="{ completed: task.completed }">
        <span @click="toggleCompletion(index)">{{ task.text }}</span>
        <button @click="removeTask(index)">Remove</button>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        newTask: '',
        tasks: []
      },
      methods: {
        addTask() {
          if (this.newTask.trim()) {
            this.tasks.push({ text: this.newTask, completed: false });
            this.newTask = '';
          }
        },
        toggleCompletion(index) {
          this.tasks[index].completed = !this.tasks[index].completed;
        },
        removeTask(index) {
          this.tasks.splice(index, 1);
        }
      }
    });
  </script>
</body>
</html>

这段代码包含以下部分：

HTML 结构：定义了一个基本的 HTML 页面结构，包含一个用于添加新任务的表单和一个显示现有任务的无序列表（<ul>）。每个任务项包含任务文本、完成状态切换按钮和删除按钮。
CSS 样式：为已完成的任务项添加了行内删除线样式（.completed 类）。
Vue 实例化：在 <script> 标签中，我们创建了一个新的 Vue 实例，将其挂载到具有 id="app" 的元素上。
数据（data）：定义了两个数据属性：newTask 用于存储待添加任务的文本，tasks 用于存储所有待办任务，每个任务包含 text（任务文本）和 completed（完成状态）属性。
方法（methods）：
- addTask：当表单提交时，检查新任务文本是否非空，然后将其添加到 tasks 数组中，并清空 newTask。
- toggleCompletion：接收任务索引作为参数，反转该任务的 completed 属性。
- removeTask：接收任务索引作为参数，使用数组的 splice 方法移除指定索引处的任务。
事件绑定与指令：
- v-on:submit.prevent="addTask"：阻止表单默认提交行为，并在提交时调用 addTask 方法。
- v-model="newTask"：双向绑定表单输入框的值与 newTask 数据属性。
- :class="{ completed: task.completed }"：根据 task.completed 的值动态添加或移除 completed 类。
- @click 事件绑定：分别用于触发任务完成状态切换和任务删除操作。