美文网首页
使用Vue 回车添加内容小demo

使用Vue 回车添加内容小demo

作者: 7级先生 | 来源:发表于2019-01-21 18:10 被阅读0次

    1.图片实例

    1.png

    2.github的地址

    https://github.com/dreamsBig/demo_Vue_enterAddContent.git

    3.代码如下

    <template>
      <div class="index">
        <div class="indexFrame">
          <div>使用回车可以添加内容</div>
          <input
            type="text"
            @keyup.enter="onEnter"
            v-model="InputText"
            @input="getWord(InputText)"
            placeholder="请输入的文本"
          >
          <hr>
          <label
            style="display:block; color:blue"
            for=""
          >显示文本</label>
          <ul>
            <li
              v-for="(key,index) in addList"
              :key="index"
              class="addText"
            >
              <span class="addList_font" :title="key">{{key}}</span><span @click="deleteCurrent(index)" class="deleteList">删除</span>
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          /* 输入框的值 */
          InputText: '',
          /* 添加列表的值 */
          addList: ''
        }
      },
      mounted () {
        this.addList = JSON.parse(localStorage.getItem('addList')) || []
      },
      methods: {
        getWord (InputText) {
          // console.log(InputText)
        },
        onEnter () {
          // 开头添加
          this.addList.unshift(this.InputText)
          // 先判断是否重复的值---在增加
          let arrs = new Set(this.addList)
          this.addList = Array.from(arrs)
          // 添加到本地存储
          localStorage.setItem('addList', JSON.stringify(this.addList))
          // 初始化的值
          this.InputText = ''
        },
        // 删除当前的文件
        deleteCurrent (index) {
          this.addList.splice(index, 1)
          // 添加到本地存储
          localStorage.setItem('addList', JSON.stringify(this.addList))
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    .indexFrame {
      margin: 20px;
    }
    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
      .addText {
        color: skyblue;
        width: 180px;
        .addList_font {
          float: left;
          width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .deleteList {
          float: right;
          color: red;
          cursor: pointer;
        }
      }
    }
    </style>

    相关文章

      网友评论

          本文标题:使用Vue 回车添加内容小demo

          本文链接:https://www.haomeiwen.com/subject/wufhjqtx.html