computed和watch实现 模糊搜索 列表人名
<div id="root">
<input v-model="keyWord" type="text" placeholder="请输入名字">
<ul>
<li v-for="(item, index) in filPerons">
index:{
{index}} |
id:{
{item.id}} |
姓名:{
{item.name}} |
年龄:{
{item.age}} |
性别:{
{item.sex}}<br />
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
keyWord: "",
persons: [
{ "id": 1, "name": "马冬梅", "age": 19, sex: "女" },
{ "id": 2, "name": "周冬雨", "age": 20, sex: "女" },
{ "id": 3, "name": "周杰伦", "age": 21, sex: "男" },
{ "id": 4, "name": "温兆伦", "age": 22, sex: "男" },
],
// filPerons: []
//data里面名称不可以和computed里面重名否则会报错
//vue.js:5108 [Vue warn]: The computed property "filPerons" is already defined in data.
},
methods: {},
computed: {
filPerons() {
return this.persons.filter((p) => { //filPerons需要返回数据
return p.name.indexOf(this.keyWord) !== -1 //filter需要返回数据
})
}
},
//#region vscode 折叠注释代码
// watch: {
// keyWord: {
// immediate: true, //可以理解为初始化,上来就执行一次
// handler(val) {
// this.filPerons = this.persons.filter(function (p) {
// return p.name.indexOf(val) !== -1 //indexOf只要不返回-1就是有数据的
// })
// }
// }
// }
//#endregion
})
</script>
搜索结果排序
<div id="root">
<input v-model="keyWord" type="text" placeholder="请输入名字">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(item, index) in filPerons">
index:{
{index}} |
id:{
{item.id}} |
姓名:{
{item.name}} |
年龄:{
{item.age}} |
性别:{
{item.sex}}<br />
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
keyWord: "",
persons: [
{ "id": 1, "name": "马冬梅", "age": 190, sex: "女" },
{ "id": 2, "name": "周冬雨", "age": 120, sex: "女" },
{ "id": 3, "name": "周杰伦", "age": 201, sex: "男" },
{ "id": 4, "name": "温兆伦", "age": 229, sex: "男" },
],
sortType: 0, //0原顺序 1降序 2升序
},
computed: {
filPerons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
})
if (this.sortType) { //判断是否为真,0是假,负数是假,1,2是真
arr.sort((p1, p2) => {
//sort排序 就是p1-p2或者p2-p1的问题,但是p1,p2返回的对象,要获取里面的年龄
//如果降序就是p2-p1,升序就是p1-p2
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
})
}
return arr
}
},
})
</script>
收集表单数据
<div id="root">
<form @submit.prevent="demo">
<!--去掉前后空格-->
账号<input type="text" v-model.trim="userInfo.account">
<br />
<br />
密码<input type="password" v-model="userInfo.password">
<br />
<br />
<!--输入内容转换成数字-->
年龄<input type="number" v-model.number="userInfo.age">
<br />
<br />
性别<input type="radio" name="sex" value="male" v-model="userInfo.sex" checked />男
<input type="radio" name="sex" value="female" v-model="userInfo.sex" />女
<br />
<br />
爱好<input ty