vue--简单的todolist

vue--简单的todolist_第1张图片

实现

TODOList 最简单的
1. input框中输入内容
2. 点击提交按钮
3. input框中的内容输入到下面的ul的li中

具体实现

  • html
    • input输入内容-- v-model="inputValue"实现数据双向绑定
    • button点击提交-- v-on:click="handleBtnClick"实现方法绑定
    • ul的li中要存放输入后提交的内容-- v-for="item in list"实现数据循环列表显示
      再看与之相对应的script
  • script
    • 定义一个实例
      • el 限制数据处理范围
      • data 放接管的数据
        • list内的值
        • inputValue内的值
      • method里面放绑定的方法
        • handleBtnClick
          • 将inputValue内的值放入list
          • 将inputValue内的值置为空

流程

  1. input内获得value,value值通过v-model放在了inputValue内。
  2. 点击button后通过v-on的click方法触发handleBtnClick事件。
  3. handleBtnClick事件就将inputValue内的值放入list内,使得li通过v-for:item in list 获得item并将其显示
  4. handleBtnClick事件在将input中的值放入li中后就将inputValue置为空

具体代码

// Ada
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>todoList</title>
        <script src='Vue.js'></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>

        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    list:[],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

你可能感兴趣的:(前端学习)