vue制作todoList

最新推荐文章于 2023-06-18 20:03:47 发布

流 .云

最新推荐文章于 2023-06-18 20:03:47 发布

阅读量157

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/liu1yi2bo3/article/details/126717791

版权

<!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>
    <script src="js/vue221.js"></script>
</head>
<body>
    <!-- 双向数据的绑定功能v-model  通常用于input框 -->
    <div id="app">
        <input type="text" v-model="list">
        <button @click="add()">提交</button>
        <ul>
            <!-- v-for 循环产生结构
            （item，index）数组中的内容和内容对应的索引值
            in 后面是循环的数组 -->
            <li v-for="(item,index) in lists">
                {{item}}
                <button @click="remove(index)"></button>
            </li>
        </ul>
    </div>
</body>
<script>
    //SEO优化
    // 创建一个vue对象
    // let定义一个变量，用于保存后方的vue对象
    // 数据：数组[11,1,1] 放置同样类型的元素
    // {
    //     key：value
    // }
    // 循环过程中 先要将循环的数据，显示到对应的结构中
    // 数据如何显示到页面中：插值表达式{{}}   
    //todoList 需要当前的事项数组
    //data选项 针对当前需要的数据
    //methods选项 针对当前拥有的方法
let vm = new Vue({
    // el:选项
    el:"#app",//el绑定生效区间
    data:{//本次需要哪些数据
        lists:["线上上课","14天核酸","9.3返校","参加培训","专接本"],
        list:"",      
    },
// 给提交按钮添加一个点击事件
methods:{
    add(){
        // 直接在数组中追加   快开学
        // 如何找到对应数组
        // this对象->vue对象
        console.log(this.lists)
        this.lists.push(this.list)
        this.list=""
    },
    remove(index){
        this.lists.splice(index,1) //第一个参数 删除元素的索引值  第二个参数向后删除几个
    }
}
})
</script>
</html>