[JavaScript知识库] vue之好玩的计划

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue之好玩的计划 -> 正文阅读

[JavaScript知识库]vue之好玩的计划

<!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="./vue.js"></script>
   <style>
       .green{
           background-color: green;
       }
       .red{
           background-color: red;
       }
   </style>
</head>
<body>
    <div id="app">
      <!--  v-model获取input框里的值 -->
       <input 
       v-model='inputvalue'
       type="text" name="" id="" placeholder="请输入要做的事">
       <button @click='add'>添加</button>
     
       <ul>
           <li v-for='item,index in list'
           
           v-bind:class='item.state?"green":"red"'
           >{{item.event}}
            <!-- 删除 -->
           <button @click='del(index)'>删除</button>

           <!-- 完成显示文字 未完成显示按钮 -->
            <span v-if='item.state'>已完成</span>
            <button v-else 
            @click='finish(index)'
            >待完成</button>
        </li>
         
       </ul>
    </div>
    <script >

        let vm=new Vue({
            el:'#app',
            data:{
              list:[{event:'今晚代码到天明',state:false},{event:'今晚代码到天明',state:false},{event:'今晚代码到天明',state:false},{event:'今晚代码到天明',state:false}],
              inputvalue:'zx'
             
            },
            methods:{
                add(){
                    // alert(this.inputvalue)
                    this.list.push({event:this.inputvalue,state:false})
                },
                del(index){
                    // console.log(index);
                    // 数组里删除点击的数据
                    this.list.splice(index,1)

                },
                finish(index){
                    this.list[index].state=true
                }
            }
              
        })

/*
能够添加代办实现
显示代办事项
删除代办事项
完成代办事项
*/
    </script>
</body>
</html>