频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
Vue关于基本的todoList实现教程
2018-07-11 16:02:07      个评论    来源:ting119的博客  
收藏   我要投稿

这篇文章记录 vue 的第一个 demo todoList 的实现过程。

  1.测试, 引入 vue 确保可以取到数据

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>todoList</title>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<p id="app">

  hello {{test}}

</p>

<script>

new Vue({

  el: &世界杯投注官网39;世界杯投注官网app&世界杯投注官网39;,

  data: {

    test: &世界杯投注官网39;world!&世界杯投注官网39;

  }

})

</script>

</body>

</html>

界面显示值:hello world

2.编辑HTML 实现界面

<p id="addItem">

  <input type="text" v-model="newItem"/>

  <button v-on:click="addNewItem()">add</button>

    <ol>

        <li v-for="(item,index) in inputData">

            {{item}}

            <button v-on:click="dele(index)">dele</button>

        </li>

    </ol>

</p>

3. 添加JS事件

<script>

var addItem= new Vue({

    el: &世界杯投注官网39;世界杯投注官网addItem&世界杯投注官网39;,

    data: {

        inputData: [],

        newItem: &世界杯投注官网39;&世界杯投注官网39;

    },

    methods: {

        addNewItem: function() {

            this.inputData.push(this.newItem);

            this.newItem="" ;

        },

        dele:function(index){

          this.inputData.splice(index,1)

        }

     }

});

</script>

4. 扩展新功能,添加已完成与未完成分类功能

HTML:

<p id="addItem">

  <input type="text" v-model="newItem"/>

  <button v-on:click="addNewItem()">add</button>

    <ol>

      <p>待完成:{{inputData.length}}</p>

        <li v-for="(item,index) in inputData">

            {{item}}

            <button v-on:click="dele(index)">dele</button>

            <button v-on:click="complete(index)">complete</button>

        </li>

        <p>已完成:{{comleteItem.length}}</p>

            <li v-for="(item,index) in completeItem">

                <del>{{item}}</del>

                <button v-on:click="deleComplete(index)">dele</button>

        </li>

    </ol>

</p>

JAVASCRIPT:

<script>

var addItem= new Vue({

    el: &世界杯投注官网39;世界杯投注官网addItem&世界杯投注官网39;,

    data: {

        inputData: [],

        completeItem:[],

        newItem: &世界杯投注官网39;&世界杯投注官网39;

    },

    methods: {

        addNewItem: function() {

            this.inputData.push(this.newItem);

            this.newItem="" ;

        },

        dele:function(index){

             this.inputData.splice(index,1)

        },

      complete:function(){

            var comItem=this.inputData[index];

            this.inputData.splice(index,1);

            this.completeItem.push(comItem);

        }

        deleComplete:function(){

         this.completeItem.splice(index,1);

       }

    }

    }

});

</script>

点击复制链接 与好友分享!回本站首页
上一篇:CSS自定义属性学习讲解
下一篇:IndexedDB CURD 操作世界杯指定投注平台实例
相关文章
图文推荐

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站

世界杯投注官网