Vue一个简单的todolist范本:知识点 各种v-指令

zhuanbike 2022-1-12 714

v-show 隐藏

v-if 删除

v-on 对应操作事件简写 @

v-bind  对应标签属性 简写 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue记事本</title>
   
</head>
<body>
<section id="toapp">
<header> 
<h1>记事本</h1>
<input v-model="inputvl" autofocus="autofocus" autocomplete="off" placeholder="请输入" @keyup.enter="add">
</header>
    
<section>
    <ul>
        <li v-for="(item,index) in list">
            <span>
                {{index+1}}
            </span>
            <label>{{item}}</label>
            <button @click="remove(index)">删除</button>
        </li>
    </ul>
</section>
<footer>
    <span v-show="list.length!=0">{{list.length}}</span>
    <button v-show="list.length!=0" @click="clear">清空列表</button>
</footer>
</section>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#toapp",
            data:{
                list:[
                    "吃饭",
                    "睡觉",
                    "打豆豆"
                ],
                inputvl:"新增数据",
            },
            methods:{
                add:function(){  
                    this.list.push(this.inputvl);
                },
                remove:function(index){
                    this.list.splice(index,1)
                },
                clear:function(){
                    this.list=[]
                }
            }            
        }
        )
    </script>
</body>
</html>


最新回复 (0)
发新帖