vue 列表过滤


<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<title>title>
		<script src="../js/vue.js" type="text/javascript">script>
		<script src="../js/jquery-3.6.0.js">script>
		<style>	
		style>
	head>
	<body>
			<div  id="app">
			<input type="text" v-model="keyword">
			<li v-for="pes,index in persons">
				{{pes.id}}
				{{pes.name}}
				{{pes.age}}
			li>
			div>
			<script type="text/javascript">
				let vm=new Vue({
					el:'#app',
					data:{
						keyword:'',
						persons:[
							{id:"003",name:"马东梅",age:19},
							{id:"005",name:"周杰伦",age:19},
							{id:"007",name:"温赵伦",age:17},
							{id:"007",name:"周东雨",age:17},
						]
					},
					watch:{
						keyword(val){
							this.persons=this.persons.filter((pes)=>{
								return pes.name.indexOf(val)!==-1
							})
						}
					}
				});
			script>
	body>
html>


<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<title>title>
		<script src="../js/vue.js" type="text/javascript">script>
		<script src="../js/jquery-3.6.0.js">script>
		<style>	
		style>
	head>
	<body>
			<div  id="app">
			<button type="button" @click="add()">addbutton>
			<input type="text" v-model="keyword">
			<li v-for="pes,index in persons">
				{{pes.id}}
				{{pes.name}}
				{{pes.age}}
			li>
			div>
			<script type="text/javascript">
				let vm=new Vue({
					el:'#app',
					data:{
						keyword:'',
						persons:[
							{id:"003",name:"马东梅",age:19},
							{id:"005",name:"周杰伦",age:19},
							{id:"007",name:"温赵伦",age:17},
							{id:"007",name:"周东雨",age:17},
						]
					},
					watch:{
						keyword(val){
							this.persons=this.persons.filter((pes)=>{
								return pes.name.indexOf(val)!==-1
							})
						}
					},
					methods:{
						add(){
							
						}
					}
				});
			script>
	body>
html>

在这里插入图片描述

你可能感兴趣的:(前端,vue.js,javascript,前端)