当前位置：网站首页>Rendering, filtering (filtering) and sorting of lists
Rendering, filtering (filtering) and sorting of lists
2022-07-25 23:12:00 【Dignified 304】
1. Rendering of the list （ Traverse and load onto the page ）
The rendering of the list uses v-for="xxx" xxx yes js Expression event , You can render arrays , Objects and strings
<body>
<div class="box">
<ul>
<!-- p yes persons Every element in the array Be similar to forin Traverse :key="p.id" Similar to primary key -->
<!-- :key Keep it unique -->
<li v-for="p in persons" :key="p.id">
{
{p.name}}-{
{p.age}}
</li>
<!-- Traversing objects ( Property value , Property name ) in object -->
<li v-for="(value,key) in car">
{
{key}}--{
{value}}
</li>
<!-- Traversal string ( character , Indexes ) in character string key It is not recommended to use index Indexes -->
<li v-for="(char,index) in str" :key="index">
{
{char}}-{
{index}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '.box',
data: {
persons: [
{ id: '001', name: ' Zhang San ', age: 18 },
{ id: '002', name: ' Li Si ', age: 22 },
{ id: '003', name: ' Wang Wu ', age: 20 }
],
str: 'hello',
car: {
name: ' BMW A8',
price: '70W',
carkey: ' Lu p15225'
},
}
})
</script>（1） Array rendering v-for="p in persons" p yes persons Each element in the array
（2） Object rendering v-for = "(value,key) in car" ,car It's an object key Is a property of an object ,value Is the value of the property
（3） Object rendering v-for = "(char,index) in str" ,str Is a string char Is each character of the string ,index Is the index of each character
2. List filtering （ Screening ）
<body>
<div class="box">
<h2> Personnel list </h2>
<!-- v-model:value Two way binding Shorthand for v-model (((!!! instead of :value))) -->
<!-- v-bind One way binding -->
<input type="text" placeholder=" Please enter the name found " v-model="keyWord">
<ul>
<!-- Traverse persons Array -->
<li v-for="p in newPersons">
{
{p.name}}---{
{p.age}}
</li>
</ul>
</div>
</body>Filter out qualified from all list data , The list to be filtered, such as persons, Then filter out the data containing search characters in the name For example, input ' 3、 ... and ', Then keep the name with ‘ 3、 ... and ’ The data of
The first step of analysis needs to traverse the list , Traverse the array and return the qualified elements
filter( ) Very suitable , Return a callback function that contains all the data returned as true New array of elements , The callback function here acts as a filter , When the element symbol and condition , The filter returns true, and filter Then all elements that meet the filter conditions will be returned
The second step of analysis is to include characters Use indexOf（） If yes, the index of that character is returned , If not, return -1, What we need is not an index , So we need to add a judgment if it is not equal to -1, Then it indicates that it contains the return element
persons.filter（（p）=>{ p.name.indexOf(' Parameters passed in ')}）;
You can use both calculation properties and listening properties
1. Use calculated properties , The input box is bound with a data Properties in , Let this attribute participate in the calculation , Then return an array , Let the template code traverse the filtered array to achieve
<script>
const vm = new Vue({
el: '.box',
data: {
keyWord: '',
persons: [
{ id: '001', name: ' Ma Dongmei ', age: 18 },
{ id: '002', name: ' Dongyu Zhou ', age: 22 },
{ id: '003', name: ' Jay Chou ', age: 20 },
{ id: '004', name: ' Lilen ', age: 30 }
],
},
computed: {
newPersons: {
get() {
// filter() Return a new array that meets the conditions return to newPersons
return this.persons.filter((item) => {
// indexOf Judge whether it includes this.keyWord, If it contains, the index is returned , Does not include return -1;
// But what we need is not an index , What is needed is the included elements !==-1 That is to say, it contains
if (item.name.indexOf(this.keyWord) !== -1) {
return item;
}
})
},
// We didn't use setter, So it can be abbreviated directly without considering
set() { }
},
// Abbreviation
// newPersons() {
// return this.persons.filter((p) => {
// return p.name.indexOf(this.keyWord) !== -1
//
//
// });
// }
},
});
</script>2. Use listening properties ： The input box is bound with a data Properties in , Then listen for this attribute , Call the function when changes occur
The method of judgment is the same as the calculation attribute above
<script>
const vm = new Vue({
el: '.box',
data: {
keyWord: '',
persons: [
{ id: '001', name: ' Ma Dongmei ', age: 18 },
{ id: '002', name: ' Dongyu Zhou ', age: 22 },
{ id: '003', name: ' Jay Chou ', age: 20 },
{ id: '004', name: ' Lilen ', age: 30 }
],
newPersons: [],
},
watch: {
// Listening properties keyWord
keyWord: {
immediate: true,// Do it immediately
handler(newValue, oldValue) {
this.newPersons = this.persons.filter((item) => {
return item.name.indexOf(this.keyWord) !== -1;
})
}
}
}
});
</script>3. Sort the list
Sorting is normal. You can sort after filtering , So it should be written in the filter function
<button @click="sortAge = 1"> In descending order of age </button>
<button @click="sortAge = 2"> In ascending order of age </button>
<button @click="sortAge = 0"> The original order </button>Add a few buttons , Taking age as an example, it is best to use the calculation function , As long as the parameters used in the calculation function change, it will call to re execute the calculation function , It is troublesome to use the listening function to listen to multiple attributes
principle ： Set up a data attribute sortAge Age ranking
Judge on the basis of screening filter（） The generated new array is not returned to newpersons Use one arr receive
Then judge according to the rise and fall of age arr How to output , Sorting method arr.sort((a,b)=>{return a-b/b-a}) a-b In ascending order b-a For the descending order return Return to arr
<body>
<div class="box">
<h2> Personnel list </h2>
<!-- v-model:value Two way binding Shorthand for v-model (((!!! instead of :value))) -->
<!-- v-bind One way binding -->
<input type="text" placeholder=" Please enter the name found " v-model="keyWord">
<ul>
<!-- Traverse persons Array -->
<li v-for="p in newPersons">
{
{p.name}}---{
{p.age}}
</li>
</ul>
<button @click="sortAge = 1"> In descending order of age </button>
<button @click="sortAge = 2"> In ascending order of age </button>
<button @click="sortAge = 0"> The original order </button>
</div>
</body>
<script>
Vue.config.productionTip = false;
new Vue({
el: '.box',
data: {
keyWord: '',
persons: [
{ id: '001', name: ' Ma Dongmei ', age: 18 },
{ id: '002', name: ' Dongyu Zhou ', age: 32 },
{ id: '003', name: ' Jay Chou ', age: 20 },
{ id: '004', name: ' Lilen ', age: 30 }
],
sortAge: 0,//0 Represents the original sequence 1 Descending 2 Ascending
},
computed: {
// The calculated property must have a return value return And when the parameters used in the calculation properties change , The callback function needs to be executed again
newPersons() {
// arr.filter(function(value,index){}); Screening arr And then you need return Returns a new array
// p Represents the parameters passed in
let arr = this.persons.filter((p) => {
// p.name.indexOf(this.seach) Judge p.name Does it contain seach The characters in No return -1 If yes, return the serial number
return p.name.indexOf(this.keyWord) !== -1;
});
if (this.sortAge) {
arr.sort((a, b) => {
// a-b In ascending order b-a For the descending order Attribute values are compared rather than elements
return this.sortAge == 1 ? b.age - a.age : a.age - b.age;
});
}
return arr;
}
}
})
</script>If sortAge yes 0 If not if Judgment returns directly arr Array
The sorting is finished ！
If you use the listening attribute, write it tomorrow , Tired ...
边栏推荐
- SSH服务器CBC加密模式漏洞（CVE-2008-5161）
- Redis过期键的删除策略[通俗易懂]
- [literature reading] - HRL -[hrl with universal policies for multi step robotic control]
- The difference between overloading and rewriting
- MathType安装和解决不能Crtl+V的问题
- AI首席架构师12-AICA-工业生产过程优化场景下产业落地解析
- Custom MVC principle
- Panzer_ Jack's personal blog founding day
- 技术美术百人计划学习笔记（2）--向量
- PHP binary array is sorted by a field in it
猜你喜欢
AI首席架构师12-AICA-工业生产过程优化场景下产业落地解析
Network Security Learning (11) scanning and blasting
Notification(状态栏通知)详解
Very simple vsplayaudio online music player plug-in
Custom MVC principle
Network Security Learning (XIII) data link layer
Take away applet with main version of traffic / repair to add main access function of traffic
Network Security Learning (16)
Enterprise level inventory management system of code audit
Solve the problem phpstudy failed to import the database
随机推荐
技术美术百人计划学习笔记（2）--向量
uvm_ HDL -- implementation of DPI in UVM (4)
【接口性能优化】索引失效的原因以及如何进行SQL优化
Flight control implementation of four rotor aircraft "suggestions collection"
QT add mouse event to control
The difference between "= =" and equals
asp日期函数(磁盘函数不正确怎么办)
What are the differences between FileInputStream and bufferedinputstream?
General paging function
Simulink learning notes (III) - Simulink automatic code generation (II) "suggestions collection"
AI chief architect 12 AICA industrial landing analysis under the industrial production process optimization scenario
Notification(状态栏通知)详解
About priority queues
How does PHP remove an element from an array based on the key value
@Autowired注解 required属性
Expression of directional signal -- complex exponential signal
About using NPM command under the terminal, the installation error problem is solved (my own experience)
Summary of common PHP functions
Zcmu--5015: complete the task
Network Security Learning (XV) ARP