zoukankan      html  css  js  c++  java
  • vue-todolist

     look:先看效果:

                                                       

    • 在浏览器的地址输入localhost:8080时,页面展示的是coding和walking两个无序序列,接着在输入框输入任何字符再敲enter回车键时,列表中又增加了一列,但是只要一刷新页面,页面还是恢复到最初打开时的情景,只有两列数据(此数据为写死在页面上的)。

    这样的简单效果是怎么实现的呢?

    1.使用命令行,新建一个基于vue-cli的项目(创建项目的方法在前面有介绍,不重复了);

    2.新建好的项目结构:

                                                                     

    而想要达到上面的效果,只需要修改src/App.vue

    <template>
      <div id="app">
      <h1 v-text="title"></h1>
      <input v-model="newItem" v-on:keyup.enter="addNew">
      <ul>
        <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
            {{item.label}}
        </li>
      </ul>
      </div>
    </template>
    
    <script>
    export default {
      data:function(){
        return {
          title:'This is a todo list',
          items: [
            {
              label:'coding',
              isFinished:false
            },
            {
              label:'waking',
              isFinished:true
            },
          ],
          newItem:''
        }
      },
      methods: {
         toggleFinish:function(item){
            item.isFinished = !item.isFinished
          },
          addNew:function(){
            console.log(this.newItem);
            this.items.push({
              label:this.newItem,
              isFinished:false
            })
            this.newItem = '';
          }
      }
    }
    </script>
    
    <style>
    .finished {
      text-decoration:underline;
    }
    html {
      height:100%;
    }
    
    body {
      display:flex;
      align-items:center;
      justify-content:center;
      height:100%;
    }
    </style>

    源码地址:点击下载

  • 相关阅读:
    springboot整合mongdb
    自动垃圾收集机制
    类加载机制
    MacBook 虚拟机的选择
    Spark 学习之 spark-sql.sh的简单使用
    spark 学习之 hadoop搭建之 ssh免密码登录
    userdel account is currently in use
    linux 磁盘管理
    qt ui文件转换成python
    opensuse安装telegram客户端小计
  • 原文地址:https://www.cnblogs.com/zhengyeye/p/6249176.html
Copyright © 2011-2022 走看看