初识 Vue(02)---( TodoList demo)

最新推荐文章于 2023-05-12 15:25:07 发布

姜皓

最新推荐文章于 2023-05-12 15:25:07 发布

阅读量279

点赞数

分类专栏： # Vue # 从浅入深学 Vue

本文链接：https://blog.csdn.net/jianghao233/article/details/80795125

版权

Vue 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

从浅入深学 Vue

28 篇文章 8 订阅

订阅专栏

TodoList demo

<!DOCTYPE html>
<html lang="en">
<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>
 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>

1. <li v-for="item in list"></li> 告诉 Vue 在 li 标签里面要循环 list 中的数据，循环的每一项都放到 item 里面

2.<button v-on:click="handleBtnClick"> 调用函数 handleBtnClick ，将其定义在 methods 中

3.v-model="inputValue 指的是数据的双向绑定(把 input 中的 Vue 值与 data 中的 inputValue 值进行绑定，一个变化另一个随之变化)，当 Input 框中内容发生变化的时候，data 中的 inputValue 就会随之变化

4.this.list.push(this.inputValue) Vue 的实例会自动的到 list 中寻找 inputValue,这里的 inputValue 与 data 中的 inputValue 是一回事 ;每次提交时能获取到 inputValue 中的内容，将其加入到 list 数据里面，使其中数据发生变化，进而导致页面发生相同的变化

5. this.inputValue = '' 在每次提交后将框中的内容清空

运行结果

姜皓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识 Vue(02)---( TodoList demo)

TodoList demo&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;TodoList&lt;/title&gt; &lt;script src = './vue.js'&g
复制链接

扫一扫