当前位置：网站首页>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 ...
边栏推荐
- How does PHP remove an element from an array based on the key value
- @Autowired注解 required属性
- Network Security Learning (XII) OSI and TCP
- Analysis of the influence of ESM direction finding error on positioning error
- MathType installation and solution cannot solve the problem of crtl+v
- Enabling partners, how can Amazon cloud technology "get on the horse and get a ride"?
- wordpress去掉网站发布时间
- 四旋翼飞行器的飞控实现「建议收藏」
- 每周推荐短视频：需要协同的智能设备越来越多，给物联网开发提出更大挑战？
- 如何获取广告服务流量变现数据，助力广告效果分析？
猜你喜欢
【论文笔记】基于在线预测和规划的机器人动态跟踪抓取方法
类和对象（3）
Solve the problem phpstudy failed to import the database
How painful is it to write unit tests?
MathType installation and solution cannot solve the problem of crtl+v
【接口性能优化】索引失效的原因以及如何进行SQL优化
Network Security Learning (XV) ARP
About using NPM command under the terminal, the installation error problem is solved (my own experience)
MathType安装和解决不能Crtl+V的问题
wordpress去掉网站发布时间
随机推荐
Thinkphp6 temporarily close the layout
How to obtain the cash flow data of advertising services to help analyze the advertising effect?
Source code of wechat applet for discerning flowers and plants / source code of wechat applet for discerning plants
自定义mvc原理
IPFs of Internet Protocol
How does Navicat modify the language (Chinese or English)?
Ffmpeg first learning (only for coding)
PCL basic operation Encyclopedia
ETL工具(数据同步) 二
Source code of YY music wechat applet imitating Netease cloud music
Take away applet with main version of traffic / repair to add main access function of traffic
@Autowired注解 required属性
WordPress function encyclopedia, you can do the theme after learning it
wordpress去掉网站发布时间
关于优先队列
Data filtering of MATLAB
Simulink学习笔记（三）——Simulink自动代码生成（二）「建议收藏」
Network Security Learning (XV) ARP
Servlet overview
Unity uses macros