vue实现todolist案例

最新推荐文章于 2024-07-19 10:30:06 发布

laro ff

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量296

点赞数

分类专栏： vue 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_63989259/article/details/127250455

版权

前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

思路：

创建静态页面
todolist案例实现添加功能
1. 在确定按钮上添加功能：v-on添加事件功能，写在methods中
2. 在input按钮中添加事件绑定，v-model：双向数据绑定，数据获取，在data中写入input初始值
3. 添加事件：数据获取成功后，将其追加进新建的数组中，使用push方法，值就会根据新建的数组所对应的input中显示出来
todolist案例实现删除功能
1. 删除添加的数据，添加删除按钮，绑定删除事件，或者直接在所想要删除的绑定事件的标签上添加删除事件
2. 删除功能是根据下标（index）来删除的，所以需要获取参数，因此添加index到li中去获取当前index，删除方法splice
todolist案例实现选框功能
1. 完善静态页面，添加input标签，type="checktext"
2. 选框功能也需要获取相应的index，以及获取选框status
3. 添加未选中按钮，绑定选中事件，将list数组，改写为下列代码中所示
4. 事件中获取index对应的item，获取item后改变status
5. 同时按钮中使用三目运算，根据status判断是否选中

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click="onSure">确定</button>
        <ul>
            <li v-for="(item,index) in list">
                <input type="checkbox" v-model="item.state">
                {{item.name}}
                <button  @click="onDelete(index)">删除</button>
                <button @click="onChoose(index)">{{item.state? '选中':'未选中'}}</button>
            </li>
        </ul>
    </div>

    <script src="../lib/vue.global.js"></script>
    <script>
        const {createApp}=Vue
        createApp({
            data() {
                return {
                    inputValue: '',
                    list:[
                        {name:'java', state:false,},
                        {name:'javaEE', state:false,},     
                    
                    ],   
                };
            },
            methods: {
                //确定
                onSure(){
                    let obj={
                        name:this.inputValue,
                        state:false,
                    }
                    this.list.push(obj)
                    this.inputValue=''
                },
                //删除
                onDelete(index){
                    this.list.splice(index,1)
                    
                },
                //选中
                onChoose(index){
                   let item= this.list[index]
                    item.state=!item.state

                }

            },
        }).mount('#app') //挂载app节点
    </script>
</body>
</html>