版权声明：欢迎转载，转载请注明出处哦！ https://blog.csdn.net/qq_41647999/article/details/85028927
预计阅读时间：6min
一、 前言
本文仅讲述基础性的原理处理方式，如果你需要找到一个函数来解决您的问题，我这边也帮不了你，学习是需要静下心来滴。如果对MVVM模式还没有真正理解到的可以参考文章：https://blog.csdn.net/qq_41647999/article/details/85004590
二、 数据绑定方式
如果您已经知道双向绑定是什么了，可以跳过此节。
数据绑定有watch和computed两种方式。这里只讲一下常用的computed方式，喜欢折腾的朋友可以自行学习watch实现双向绑定。简单概括一下单向绑定和双向绑定，然后贴出代码。
1、 单项绑定
比如说现在有两个输入框，分别为①和②，当在①中输入数据的时候②也会跟着变化，但是在②中输入数据的时候，①不会发生变化。
2、 双向绑定
就和上边的单项绑定作为对比的话，无论是在①还是②输入数据的时候都会发生改变。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据的绑定方式</title>
</head>
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(双向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
},
// 计算属性配置: 值为对象
computed: {
fullName1 () { // 属性的get()
console.log('fullName1()', this)
return this.firstName + '-' + this.lastName
},
fullName2: {
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get () {
console.log('fullName2 get()')
return this.firstName + '-' + this.lastName
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set (value) {// fullName2的最新value值 A-B23
console.log('fullName2 set()', value)
// 更新firstName和lastName
// 按照‘_’来分割，分到数组中保存起来
const names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
})
</script>
</body>
</html>三、 实时查找筛选排序数据
对于json还不懂的朋友，可参考文章：https://blog.csdn.net/qq_41647999/article/details/82769761
先贴出代码，解释全在代码里面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染与过滤与排序</title>
</head>
<body>
<div id="demo">
// 在输入框绑定一个 searchName，当输入框里面已输入这个值数据就发生改变。
<input type="text" v-model="searchName">
<ul>
<li v-for="(p, index) in filterPersons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
</li>
</ul>
<div>
<button @click="setOrderType(2)">年龄升序</button>
<button @click="setOrderType(1)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
searchName: '',
orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
persons: [
{name: 'Tom', age:18},
{name: 'Jack', age:17},
{name: 'Bob', age:19},
{name: 'Mary', age:16}
]
},
computed: {
//将过滤函数定义成一个计算属性
filterPersons () {
// 取出相关数据
const {searchName, persons, orderType} = this
//最终需要显示的数组
// 三个点代表扩展运算符，是ES6的语法，如果arr存在就把persons的值填进去
let arr = [...persons]
// 过滤数组
if(searchName.trim()) {
//对persons进行过滤，‘=>’后面返回bool类型的值
// indexof将name的数组下标与serchName的下标做比较，没有匹配值则返回-1
arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
}
// 排序
if(orderType) {
// 如果下面的function返回是负数，则p1在前
arr.sort(function (p1, p2) {
if(orderType===1) { // 降序
return p2.age-p1.age
} else { // 升序
return p1.age-p2.age
}
})
}
return arr
}
},
methods: {
// 更新ordertype的数值
setOrderType (orderType) {
this.orderType = orderType
}
}
})
</script>
</body>
</html>