码迷,mamicode.com
首页 > 其他好文 > 详细

vue写的简单版todolist

时间:2019-11-07 23:35:45      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:code   NPU   boa   segment   attribute   button   input   inpu   http   

上一张丑图:

技术图片

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

vue写的简单版todolist

标签:code   NPU   boa   segment   attribute   button   input   inpu   http   

原文地址:https://www.cnblogs.com/qianduanwriter/p/11816085.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!