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