vuejs小例子之记事本

<html>

head>
  script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scriptstyle>
    #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,.075),0 0 8px rgba(102,175,233,.6);
      Box-shadow: inset 0 1px 1px rgba(0,.6)
    }

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

    .li-div {
      text-align: center;
      border: 3px solid white;
    }
  </>
bodydiv id="app">
    class="title"
      记事本
    divhr>
      span>
        p ="color: chartreuse"请输入内容：
          input type="text" placeholder="按回车保存" class="inp" v-model="tmp" @keyup.enter="add"p="content"ulli v-for="(item,index) in message">
          ="li-div">
            >{{index}}label>{{item}}button @click="remove(index)">删除buttonliv-show="message.length>0"="float: left;"
        当前记事本记录数：{{message.length}}
      ="float: right;;"="clear">清空
    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 = [];
        },})
  >

效果：

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

删除编号为1的数据：

清空记事本：

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

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

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

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

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

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

vuejs小例子之记事本

相关推荐