Vue简单实现一个记事本

Vue简单实现一个记事本

直接上代码：网页结构

<template>
  <div>
    <div class="note">
      <h1>晓亦记事本</h1>
      <div class="main">
        <input type="text" autofocus="autofocus" placeholder="今日心情~" v-model="news" @keyup.enter="publish"/>
        <ul>
          <li v-for="(item,index) in list" :key="index">
            <span>
              {
          
   {
          
   index+1}}.
              <em>{
          
   {
          
   item}}</em>
            </span>
            <span @click="delsingle(index)">X</span>
          </li>
        </ul>
      </div>
      <div class="footer clearfix">
        <span v-show="list.length!=0">{
          
   {
          
   list.length}} items left</span>
        <span @click="delnote">clear</span>
      </div>
      <P></P>
      <P></P>
    </div>
  </div>
</template>

CSS代码

<style lang="less">
* {
          
   
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
          
   
  list-style: none;
}
em {
          
   
  font-style: normal;
  margin-left: 20px;
}
.note {
          
   
  width: 500px;
  // height: 500px;
  margin: 100px auto;
  h1 {
          
   
    font-weight: 400;
    color: red;
  }
  .main {
          
   
    width: 500px;
    border: 2px solid #eee;
    li {
          
   
      height: 50px;
      border-bottom: 1px solid #eee;
      line-height: 50px;
      padding: 0 10px;
      span {
          
   
        float: left;
        font-size: 18px;
        color: #999;
      }
      span:last-child {
          
   
        float: right;
        font-size: 18px;
        display: none;
        color: chocolate;
        cursor: pointer;
      }
    }
    li:hover span:last-child {
          
   
      display: block;
    }
    input {
          
   
      width: 100%;
      height: 50px;
      border: 0;
      border-bottom: 1px solid #eee;
      outline: 0;
      &::placeholder {
          
   
        font-size: 16px;
        text-indent: 1rem;
      }
    }
  }
  .footer {
          
   
    padding: 0 10px;
    width: 500px;
    height: 40px;
    border: 2px solid #eee;
    border-top: 0;
    span:nth-child(1) {
          
   
      float: left;
      color: #999;
      line-height: 40px;
    }
    span:last-child {
          
   
      float: right;
      color: #999;
      line-height: 40px;
      cursor: pointer;
    }
  }
  p {
          
   
    width: 99%;
    padding: 2px 0;
    margin-left: 2px;
    border: 2px solid #eeeeee;
    border-top: 0;
  }
  p:last-child {
          
   
    width: 98%;
    margin-left: 4px;
  }
}

.clearfix:after {
          
   
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
          
   
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
</style>

JS代码：

<script>
export default {
          
   
  data() {
          
   
    return {
          
   
      list: ["上午好", "下午好", "晚上好"],
      news:""
    };
  },
  methods: {
          
   
    delnote: function() {
          
   
      //   console.log(111);
      this.list = [];
    },
    delsingle: function(id) {
          
   
      //     console.log(1111);
      //   console.log(id);
      this.list.splice(id, 1);
    },
    publish:function () {
          
   
        // console.log(this.news);
        this.list.unshift(this.news);
        this.news=""
        
      }
  }
};
</script>