使用 v-mode 实现增删小案列

最新推荐文章于 2022-09-16 08:27:04 发布

sslcsq

最新推荐文章于 2022-09-16 08:27:04 发布

阅读量131

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/sslcsq/article/details/103587225

版权

样式就不写了哈~

直接上代码
↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <!-- 引入vue.js -->
</head>
<body>
<div id="ssl">
<input type="text" v-model="title" placeholder="请输入您要输入的信息" @keyup.enter="add()">
<!-- 先写一个输入框 v-model绑定一下 然后在给他绑定一个键盘事件回车 -->
        <ul>
            <li v-for="(e,i) in list" :key="i"><!-- 渲染数据 -->
                {{e.title}}
                <span>
                    <button @click="del(i)">删除</button>
                    <!-- 删除数据 -->
                </span>
            </li>
        </ul>
</div>
</body>
<script>
    new Vue({
        el:"#ssl",
        data:{
            title:"",//v-model绑定的变量
            list:[]//定义一个空数组
        },
        methods:{//在methods里面写方法
            add()
            {
                if(this.title=="")//判断一下如果输入框的值为空则提示
                {
                    alert("输入的内容不能为空");
                }
                else//如果不为空
                {
                    let obj={title:this.title};//声明一个obj用来接收输入框输入的值
                    this.list.push(obj);//添加进数组里面
                    if(this.list.length>10)//如果输入的数据超过十条 则最后输入的替换前面的数据第一条
                    {
                        this.list.shift();
                    }
                    this.title="";//按下回车过后清空输入框输入的内容
                }
            },
            del(i)//删除数据
            {
                this.list.splice(i,1);//原生js根据传过来的下标来截取
            }
        }
    })
</script>
</html>