vue写的简单版todolist

Posted 2020-11-30 qianduanwriter

上一张丑图：

项目演示地址：http://47.75.195.199/todolist/
源码地址：https://github.com/chunsenye/...

<template>
  <div>
    <label >今天要做什么</label>
    <input type="text" v-model="text">
    <input type="button" value="提交" @click="submit">
    <ul>
      <li v-for="(item,index) in todolist" :key="index">
        {{index+1}}.{{item}}
        <input type="button" value=‘X‘ @click="deleteT(index)" :key="index">  
      </li>
    </ul>
  </div>
 
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      todolist: ["code to die", "never mind", "say goodbye"],
      text:‘‘
    };
  },
  methods: {
    submit() {
      this.todolist.push(this.text);
      this.text=‘‘;
    },
    deleteT(index) {
      this.todolist.splice(index,1);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul li {
  padding: 10px;
  font-size: 26px;
  list-style: none;
}

a {
  color: #42b983;
}
</style>