project:todo

todos/src/components/TodoList.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="tdContainer">
+    <ul class="tdList">
+      <li class="tdItem" v-for="item in todos" :key="item.id">
+        <div class="tdItem-main">
+          <input type="checkbox" v-model="item.completed" class="toToggle" />
+
+          <span class="tdTxt" :class="{ completed: item.completed }">
+            {{ item.txt }}
+          </span>
+        </div>
+
+        <div class="tdItem-acts">
+          <a @click="delTodo(item)">删除</a>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.tdContainer {
+  margin-top: 20px;
+}
+
+.tdList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tdItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border-bottom: 1px solid #eee;
+  transition: 0.2s;
+}
+
+.tdItem:hover {
+  background: #fafafa;
+}
+
+.toToggle {
+  margin-right: 10px;
+}
+
+.tdItem-main {
+  display: flex;
+  align-items: center;
+}
+
+.tdTxt {
+  font-size: 16px;
+  transition: 0.3s;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #999;
+}
+
+.tdItem-acts a {
+  color: #ff4d4f;
+  cursor: pointer;
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.tdItem:hover .tdItem-acts a {
+  opacity: 1;
+}
+
+.tdItem-acts a:hover {
+  text-decoration: underline;
+}
+</style>
+
+<script>
+export default {
+  props: ["todos"],
+
+  methods: {
+    delTodo(item) {
+      this.$emit("delTodo", item)
+    }
+  }
+}
+</script>
+
+<style>
+.tdList {
+  list-style: none;
+  padding: 0;
+}
+
+.tdItem {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: gray;
+}
+</style>