Vue2.x之資料繫結與實時查詢篩選排序資料
阿新 • • 發佈：2018-12-16
預計閱讀時間：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/ 三、 實時查詢篩選排序資料
對於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>