Vue 实现基本的todoList教程

最新推荐文章于 2024-06-16 21:48:01 发布

ting119

最新推荐文章于 2024-06-16 21:48:01 发布

阅读量884

点赞数

本文链接：https://blog.csdn.net/ting119/article/details/80932403

版权

这篇博客记录 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>
<div id="app">
  hello {{test}}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    test: 'world!'
  }
})
</script>
</body>
</html>

界面显示值：hello world

2.编辑HTML 实现界面

<div 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>

</div>

3. 添加JS事件

<script>
var addItem= new Vue({
    el: '#addItem',
    data: {
        inputData: [],
        newItem: ''
    },
    methods: {
        addNewItem: function() {
            this.inputData.push(this.newItem);
            this.newItem="" ;
        },
        dele:function(index){
          this.inputData.splice(index,1)
        }
     }
});
</script>

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

HTML：

<div id="addItem">
  <input type="text" v-model="newItem"/>
  <button v-on:click="addNewItem()">add</button>
    <ol>
      <div>待完成：{{inputData.length}}</div>
        <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>
        <div>已完成:{{comleteItem.length}}</div>
            <li v-for="(item,index) in completeItem">
                <del>{{item}}</del>
                <button v-on:click="deleComplete(index)">dele</button>
        </li>
    </ol>
</div>

JAVASCRIPT:

<script>
var addItem= new Vue({
    el: '#addItem',
    data: {
        inputData: [],
        completeItem:[],
        newItem: ''
    },
    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>

ting119

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Vue 实现基本的todoList教程

这篇博客记录 vue 的第一个 demo todoList 的实现过程。 1. 引入 vue 确保可以取到数据&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;todoList&lt;/title&gt;&lt;script src="ht
复制链接

扫一扫