vue 初学1 （实现列表搜索，删除，添加，时间格式化）

ゞ浴缸里的玫瑰 2023-05-31 15:25 5阅读 0赞

<td>\{ \{item.time|dateFormat('yyyy-mm-dd hh:mm:ss')\}\}</td>

//全局过滤器,进行时间的格式化  
        Vue.filter('dateFormat',function(datastr,patter)\{  
            var dt=new Date(datastr);  
            //yyyy-mm-dd  
            var y=dt.getFullYear();  
            var m=(dt.getMonth()+1).toString().padStart(2,'0');  
            var d=dt.getDate().toString().padStart(2,'0');  
            if (patter.toLowerCase()==='yyyy-mm-dd') \{  
                return  \`$\{y\}-$\{m\}-$\{d\}\`;  
            \} else\{

//padStart(maxlength,fillstring) 用来填充字符串 ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。`padStart()`用于头部补全 第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。  
                var hh=dt.getHours().toString().padStart(2,'0');  
                var mm=dt.getMinutes().toString().padStart(2,'0');  
                var ss=dt.getSeconds().toString().padStart(2,'0');  
                return  \`$\{y\}-$\{m\}-$\{d\} $\{hh\}:$\{mm\}:$\{ss\}\`;  
            \}  
              
        \})

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<script type="text/javascript" src="js/vue2019.js" ></script>
    	 <style>
            #app {
                width: 70%;
                margin: 10px auto;
            }
    
            .tb {
                border-collapse: collapse;
                width: 100%;
            }
    
            .tb th {
                background-color: #0094ff;
                color: white;
            }
    
            .tb td,
            .tb th {
                padding: 5px;
                border: 1px solid black;
                text-align: center;
            }
    
            .add {
                padding: 5px;
                border: 1px solid black;
                margin-bottom: 10px;
            }
        </style>
    	<body>
            <div id="app">
            	
            	编号：<input v-model="id" name="id" type="text"/>
            	品牌名称:<input v-model="name" name="name" type="text"/><button @click="add">添加</button>
            	<br />
            	品牌名称:<input v-model="soso" name="cat"  placeHolder="请输入筛选内容" type="text"/>
    			<table class="tb">
    				<tr>
    					<th>编号</th>
    					<th>品牌名称</th>
    					<th>创立时间</th>
    					<th>操作</th>
    				</tr>
    				<tr v-for="item in search(soso)" :key="item.id">
    					<td>{
       {item.id}}</td>
    					<td>{
       {item.name}}</td>
    					<td>{
       {item.time|dateFormat}}</td>
    				    <td><a href="javascript:void(0)" v-on:click="delte(item.id)">删除</a></td>
    				</tr>
    			</table>
    		</div>
    	</body>
    	<script>
    		//全局过滤器,进行时间的格式化
    		Vue.filter('dateFormat',function(datastr){
    			var dt=new Date(datastr);
    			//yyyy-mm-dd
    			var y=dt.getFullYear();
    			var m=dt.getMonth()+1;
    			var d=dt.getDate();
    			return  `${y}-${m}-${d}`;
    		})
    		  var vm=new Vue({
        	      el:'#app',
        	      data:{
        	      	id:'1',
        	      	name:'',
        	      	soso:'',
        	      	list:[{"id":1,"name":"大黄蜂","time":new Date()},
        	          {"id":2,"name":"奔驰","time":new Date()}
        	      ]},
        	      methods:{
        	      	add:function(){
        	      		this.list.push({"id":this.id,"name":this.name,"time":new Date()})
        	      	},
        	      	delte:function(id){  
        	      		    if(!confirm("确定要删除吗?")){
                        	return ;
                   }
        	      		  // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
        	      		var index=this.list.findIndex(function(item){
        	      			return item.id==id;
        	      		})
        	      		  this.list.splice(index,1);  
        	      	},
        	      	//根据关键字实现数组的过滤
        	      	search:function(soso){
        	      		var newList=[];
        	      		this.list.forEach(item=>{
        	      			if(item.name.indexOf(soso)!=-1){
        	      				newList.push(item)
        	      			}
        	      		})
        	      		console.log(newList)
        	      		return newList;
        	      	}
        	    
        	      }
              })
    		
    	</script>
      
    </html>

效果：

![20191018085117210.png][]

[20191018085117210.png]: /images/20230531/468733f9e84b4d149ab9ee1a3d77dcb5.png