前端VUE3.0,DAY19，列表过滤
VUE3.0,DAY19
-
-
- 生成一个人员列表
- 实现列表过滤即模糊查询
- 计算属性实现列表过滤（模糊查询）
-
生成一个人员列表
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表过滤title>
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
script>
head>
<body>
<div id="root">
<ul>
<li v-for="XianShi in persons1">{{XianShi.name}}-{{XianShi.age}}-{{XianShi.sex}}li>
ul>
div>
<script type="text/javascript">
Vue.config.productionTip = false
//创建vue实例，习惯用一个变量来接该vue实例，此处用x
const x = new Vue({
el: '#root',
data() {
return {
persons1: [
{
id: '001', name: '马冬梅', age: 18, sex: '男'
},
{
id: '002', name: '周冬雨', age: 19, sex: '女'
},
{
id: '003', name: '周杰伦', age: 20, sex: '男'
},
{
id: '004', name: '温兆伦', age: 21, sex: '女'
}
],
}
},
})
script>
body>
html>
实现列表过滤即模糊查询
1.虽然实现了模糊查询，但是当查询过某一个后，在想重新从最初的姓名开始查询，就会出现显示空白的情况，因为我们在代码中把data中的数据修改了，每查询一次，仅保留符合条件的数据，不符合的都被去除了。
注意：indexOf查询是否包含某字符串的时候，“空”在字符串中是一定包含的。如图中所示。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表过滤title>
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
script>
head>
<body>
<div id="root">
<h2>人员列表h2>
<input type="text" placeholder="请输入要查询的名字" v-model="KeyWords">
<ul>
<li v-for="XianShi in persons1">{{XianShi.name}}-{{XianShi.age}}-{{XianShi.sex}}li>
ul>
div>
<script type="text/javascript">
Vue.config.productionTip = false
//创建vue实例，习惯用一个变量来接该vue实例，此处用x
const x = new Vue({
el: '#root',
data() {
return {
//keywords与输入框进行了双向数据绑定，收集用户的输入内容。
KeyWords: '',
persons1: [
{
id: '001', name: '马冬梅', age: 18, sex: '男'
},
{
id: '002', name: '周冬雨', age: 19, sex: '女'
},
{
id: '003', name: '周杰伦', age: 20, sex: '男'
},
{
id: '004', name: '温兆伦', age: 21, sex: '女'
}
],
}
},
//监视属性，监视keywords的变化
watch: {
KeyWords(val) {
//使用过滤函数filter，过滤persons1中的数据
//随后在令当前的persons1中的数据等于过滤后的。
this.persons1 = this.persons1.filter((XianShi) => {
//返回姓名中包含输入val值的数据，检测是否包含字符串用indexOf
return XianShi.name.indexOf(val) !== -1
//不等于-1就是包含，等于-1就是待检测的数据中不包含指定的字符串
})
}
}
})
script>
body>
html>
3.如何解决列表的内容越搜索越少的问题？使用一个新的数据组接收过滤后的数据，即不改动初试的数据组persons1。然后监视属性使用完整写法。immediate设置为真，当监视的数据还没发生任何变化时，就执行一次监视操作之后的返回值。
这里的原理是还没有输入任何查询字符时，即查询框为空，那么立即执行监视操作，此时监视属性中的监视value值为空，那么就返回所有的原始数据，因为所有的字符串数据使用indexof查询都含有空值。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表过滤title>
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
script>
head>
<body>
<div id="root">
<h2>人员列表h2>
<input type="text" placeholder="请输入要查询的名字" v-model="KeyWords">
<ul>
<li v-for="XianShi in filterpersons1">{{XianShi.name}}-{{XianShi.age}}-{{XianShi.sex}}li>
ul>
div>
<script type="text/javascript">
Vue.config.productionTip = false
//创建vue实例，习惯用一个变量来接该vue实例，此处用x
const x = new Vue({
el: '#root',
data() {
return {
//keywords与输入框进行了双向数据绑定，收集用户的输入内容。
KeyWords: '',
persons1: [
{
id: '001', name: '马冬梅', age: 18, sex: '男'
},
{
id: '002', name: '周冬雨', age: 19, sex: '女'
},
{
id: '003', name: '周杰伦', age: 20, sex: '男'
},
{
id: '004', name: '温兆伦', age: 21, sex: '女'
}
],
filterpersons1: []
}
},
//监视属性，监视keywords的变化
watch: {
KeyWords: {
immediate: true,
handler(val) {
//使用过滤函数filter，过滤persons1中的数据
//随后在令当前的filterpersons1中的数据等于过滤后的数据。
this.filterpersons1 = this.persons1.filter((XianShi) => {
//返回姓名中包含输入val值的数据，检测是否包含字符串用indexOf
return XianShi.name.indexOf(val) !== -1
//不等于-1就是包含，等于-1就是待检测的数据中不包含指定的字符串
})
}
}
}
})
script>
body>
html>
计算属性实现列表过滤（模糊查询）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表过滤title>
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
script>
head>
<body>
<div id="root">
<h2>人员列表h2>
<input type="text" placeholder="请输入要查询的名字" v-model="KeyWords">
<ul>
<li v-for="XianShi in filterpersons1">{{XianShi.name}}-{{XianShi.age}}-{{XianShi.sex}}li>
ul>
div>
<script type="text/javascript">
Vue.config.productionTip = false
//创建vue实例，习惯用一个变量来接该vue实例，此处用x
/*const x = new Vue({
el: '#root',
data() {
return {
//keywords与输入框进行了双向数据绑定，收集用户的输入内容。
KeyWords: '',
persons1: [
{
id: '001', name: '马冬梅', age: 18, sex: '男'
},
{
id: '002', name: '周冬雨', age: 19, sex: '女'
},
{
id: '003', name: '周杰伦', age: 20, sex: '男'
},
{
id: '004', name: '温兆伦', age: 21, sex: '女'
}
],
filterpersons1: []
}
},
//监视属性，监视keywords的变化
watch: {
KeyWords: {
immediate: true,
handler(val) {
//使用过滤函数filter，过滤persons1中的数据
//随后在令当前的filterpersons1中的数据等于过滤后的数据。
this.filterpersons1 = this.persons1.filter((XianShi) => {
//返回姓名中包含输入val值的数据，检测是否包含字符串用indexOf
return XianShi.name.indexOf(val) !== -1
//不等于-1就是包含，等于-1就是待检测的数据中不包含指定的字符串
})
}
}
}
})*/
//计算属性computer实现
new Vue({
el: '#root',
data() {
return {
//keywords与输入框进行了双向数据绑定，收集用户的输入内容。
KeyWords: '',
persons1: [
{
id: '001', name: '马冬梅', age: 18, sex: '男'
},
{
id: '002', name: '周冬雨', age: 19, sex: '女'
},
{
id: '003', name: '周杰伦', age: 20, sex: '男'
},
{
id: '004', name: '温兆伦', age: 21, sex: '女'
}
],
}
},
computed: {
filterpersons1() {
//第一个return是计算属性规定的要返回值
//第二个return是过滤属性规定的要返回值
//如何拿到用户输入的要检测的内容。使用this.keywords
return this.persons1.filter((XianShi) => {
return XianShi.name.indexOf(this.KeyWords) !== -1
})
}
}
})
script>
body>
html>
