vue实现留言板

ゞ浴缸里的玫瑰 2022-01-20 09:55 411阅读 0赞

<!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="../js/vue221.js"></script>
    </head>
    <body>
        <div id="app">
        
          
          
          姓名:<input type="text" v-model="name">
          内容:<input type="text" v-model="content">
          <button @click="add()">添加</burtton>
          <ul>
          <li v--for="(item,index) in arr" :key="index">
            <span>姓名：{
        {item.name}}</span>
            <span>内容：{
        {item.content}}</span>
            <button @click="delete(index)">删除</button>
          </li>
          </ul>
          <input type="text" v-model="uname">
        </div>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                   arr:[{name:"王一",content:"哈哈哈"},{name:"王一",content:"哈哈哈"},{name:"王一",content:"哈哈哈"},
                   {name:"王一",content:"哈哈哈"},{name:"王一",content:"哈哈哈"},{name:"王一",content:"哈哈哈"},{name:"王二",content:"哈哈哈"},{name:"王二",content:"哈哈哈"},{name:"王二",content:"哈哈哈"},{name:"王三",content:"哈哈哈"},{name:"王三",content:"哈哈哈"},{name:"王三",content:"哈哈哈"},{name:"张三",content:"哈哈哈"},{name:"赵四",content:"哈哈哈"]]，
                   name:"",
                   content:"",
                   uname:""
                   
                },
                methods:{
                //添加留言
                add:function(){
                    let obj=[];
                    obj.name=this.name;
                    obj.content=this.content;
                    this.arr.push(obj);
                    this.name=""
                    this..content=""
                },
                //删除留言
                delete:function(index){
                    this.arr.splice(index,1)
                }
                },
                computed:{
                    //严谨判断 如果input框中没有输入任何数据 则显示全部留言
                    if(this.uname==""){
                        return this.arr
                    }else{
                        return this.arr.filter((item,index)=>{
                            if(item.name==this.uname){
                                return item
                            }
                        })
                    }
                    
                 //模糊筛选
                 return this.arr.filter((item,index)=>{
                     if(item.name.indexOf(this.uname)>=0){
                         return item
                     }
                 })
                }
            })
        </script>
    </body>
    </html>
    复制代码