用vue实现todolist

455 阅读1分钟
  • v-model实现数据双向绑定
  • v-on给button绑定click事件
  • 标签指令v-for可以循环数据,list为data里的list,
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <!-- v-model实现数据双向绑定 -->
        <button v-on:click="handleBtnClick">提交</button>
        <!--v-on给button绑定click事件 -->
        <ul>
            <li v-for="item in list">{{item}}</li>
            <!-- 标签指令v-for可以循环数据,list为data里的list,item为每一项的内容 -->
        </ul>
    </div>
    <script>
        // vue实例
        var app = new Vue({
            el: '#app',
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue) //获取data里的inputValue,放入list数组
                    this.inputValue = '' //清除input框里的内容
                }
            }
        })
    </script>
</body>

</html>

image.png

image.png