(资料图片仅供参考)

vue 部分

<template id="app">  <div class="main-content">    <span>任务事项</span>    <form @submit.prevent="add_task">      <input class="input-text" v-model="task_text" placeholder="添加待办事项" />      <button class="add_btn">添加</button>    </form>    <ol><!--      通过v-for实现循环渲染-->      <li v-for="(item, index) in todos">        {{item}}        <button class="del-btn" @click="remove(index)">删除</button>        <hr/>      </li>    </ol>  </div></template><script>export default {  name: "Todo",  data(){    return{      // 待办任务      todos: [],      task_text: '',    }  },  methods:{    // 添加一个任务    add_task(){      if (this.task_text.length === 0){        alert('请输入待办事项')        return      }      this.todos.push(this.task_text)      this.task_text = ""    },    // 删除长度为1的index    remove(index){      this.todos.splice(index, 1)    }  }}</script><style scoped>  @import "@/assets/todo.css";</style>

css 部分

.main-content{    height: 350px;    width: 500px;    background-image:linear-gradient(0deg, #85c4e5 0%, #b0dcef 50%, #b0dcef 50%, #85c4e5 100%);}span{    display: inline-flex;    width: 500px;    justify-content: center;    margin-top: 20px;    font-family: 楷体, sans-serif;    color: #9031a1;    letter-spacing: 5px;}form{    margin-top: 10px;    margin-left: 50px;}.input-text{    width: 300px;    height: 18px;    font-size: 10px;    font-family: 楷体,sans-serif;    background-color: #e2d1f3;    letter-spacing: 3px;}.add_btn{    margin-left: 20px;    background-color: #e2d1f3;    letter-spacing: 3px;    color: #186faf;}hr{    margin-left: 0;    width: 400px;    border: 1px solid #ddb0ea;}li{    margin-top: 15px;    margin-left: 10px;    font-family: 楷体, sans-serif;    list-style: circle;    color: #096b20;    letter-spacing: 3px;}.del-btn{    height: 20px;    background-color: #e2d1f3;    font-family: 楷体,sans-serif;    border-color: #9fa4a6;    color: #3e78c4;    letter-spacing: 3px;}

效果图部分

标签：