vue实现留言板_javascript_weixin

<!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>
复制代码
vue实现留言板

weixin_33774883

所有评论(0)

weixin_33774883
