vue写的简单版todolist

转载于 2018-11-09 22:25:18 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016958914

文章标签：

#javascript #ViewUI

本文介绍了一个使用Vue.js构建的简单待办事项应用程序。该应用允许用户输入任务并将其添加到列表中，同时提供了删除任务的功能。通过这个示例，展示了Vue.js的基本用法，包括数据绑定、事件处理和列表渲染。

上一张丑图：

项目演示地址：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>