Vue指令使用场景

会飞的贤鱼

已于 2023-09-02 19:20:42 修改

阅读量265

点赞数

文章标签： html5 vue.js

于 2023-09-02 18:50:34 首次发布

本文链接：https://blog.csdn.net/weixin_57062986/article/details/132632123

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style type="text/css">
    </style>
</head>

<body>
    <section id="app">
        <header class="header">
            <h1>小黑记事本</h1>
            <input v-model="todoName" placeholder="请输入任务" class="new-todo" />
            <button @click="add" class="add">添加任务</button>
        </header>
        <section class="mian">
            <ul class="to-list">
                <li class="todo" v-for="(item,index) in list" :key="item.id">
                    <div class="view">
                        <span class="index">{{index+1}}.</span><label>{{item.name}}</label>
                        <button @click="del(item.id)" class="destroy">删除</button>
                    </div>
                </li>
            </ul>
        </section>
        <footer class="footer" v-show="list.length>0">
            <span>合计：<strong>{{ list.length }}</strong></span>
            <button @click="clear">清空</button>
        </footer>    
    </section>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                todoName:'',
                list:[
                    {id:1,name:'跑步'},
                    {id:2,name:'游泳'},
                    {id:3,name:'跳绳'},
                ]

            },
            methods: {
                clear(){
                    this.list=[]

                },
                del(id){
                    this.list =this.list.filter(item=>item.id!=id)
                },
                add(){
                    if(this.todoName.trim()===""){
                        alert("亲输入，不能够为空");
                        return;
                    }
                     // 头插法数组
                    this.list.unshift({
                        id: +new Date(),
                        name: this.todoName,
                    })

                },
                login() {

                },
                reset: function () {
                    this.username = "";
                    this.password = "";

                }

            }

        })
    </script>

</body>

</html>