vue实现留言板

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_33774883

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量4.4k

点赞数 1

文章标签： javascript 开发工具 ViewUI

原文链接：https://juejin.im/post/5cce4e266fb9a032050e50a1

版权

<!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>
复制代码

weixin_33774883

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue实现留言板

<!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-U...
复制链接

扫一扫