vuejs小例子之记事本

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    #app {
      margin: 0px auto;
      width: 500px;
      border: 1px solid blue;
      height: 500px;
    }

    .title {
      line-height: 50px;
      text-align: center;
      height: 50px;
      font-weight: 20px;
      font-size: 36px;
      background: coral;
    }

    .inp {
      outline-style: none;
      border: 0px solid #ccc;
      width: 330px;
      font-size: 15px;
      padding: 3px 3px;
      font-family: "Microsoft soft";
    }

    input:focus {
      border-color: #66afe9;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
    }

    ul,
    li {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .li-div {
      text-align: center;
      border: 3px solid white;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="title">
      记事本
    </div>
    <hr>
    <div>
      <span>
        <p style="color: chartreuse">请输入内容：
          <input type="text" placeholder="按回车保存" class="inp" v-model="tmp" @keyup.enter="add">
        </p>
      </span>
    </div>
    <hr>
    <div class="content">
      <ul>
        <li v-for="(item, index) in message">
          <div class="li-div">
            <span>{{index}}</span>
            <label>{{item}}</label>
            <button @click="remove(index)">删除</button>
          </div>
        </li>
      </ul>
    </div>
    <hr>
    <div v-show="message.length>0">
      <div style="float: left;">
        当前记事本记录数：{{message.length}}
      </div>
      <div style="float: right;;">
        <button @click="clear">清空</button>
      </div>
    </div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        tmp: "",
        message: ['今天好开心', '今天超级棒', '今天美美哒'],
      },
      methods: {
        add: function () {
          if (this.tmp == null || this.tmp == "") {
            alert("输入不能为空");
          } else {
            this.message.push(this.tmp);
          }
        },
        remove: function (ind) {
          var flag = confirm("是否要删除删除" + ind);
          if (flag == true) {
            this.message.splice(ind, 1);
          }
        },
        clear: function () {
          this.message = [];
        },
      },
    })
  </script>
</body>

</html>

效果：

在输入框中输入内容并回车：

删除编号为1的数据：

清空记事本：

说明：综合使用了vue.js的多个指令，包括：

使用v-for来显示列表数据。

使用v-on来进行删除和清空操作。

使用v-on进行新增操作，具体是keyup.enter事件。

使用v-model将文本框中的数据和vue-data中的数据进行绑定。

使用v-show根据条件进行显示记录数和清空按钮。