返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发--排序练习

李洋水蛟龙
2022-06-08 15:41:49
阅读量0
HarmonyOS
1
0
１.png

２.png

一、创建项目
二、示例代码
index.hml
  1. <div class="container">
  2.     <input  class="input" type="number" value="{{v}}" on:change="changeNum"></input>
  3.     <input type="button" value="提交" onclick="submit"></input>
  4.     <div class="textdiv">
  5.         <text class="title" for="{{txtArray}}">
  6.             <span>{{$item.txt}}</span>
  7.         </text>
  8.     </div>
  9.     <button type="capsule" value="排序" onclick="sortClick"></button>
  10. </div>
复制代码

index.css
  1. .container {
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-content: center;
  5.     align-items: center;
  6.     width: 100%;
  7.     height: 100%;
  8. }
  9. .input{
  10.     width: 300px;
  11.     border-radius: 4px;
  12.     margin-bottom: 10px;
  13. }

  15. .textdiv{
  16.     flex-direction: row;
  17.     align-items:center;
  18.     justify-content: center;
  19.     margin: 10px 0px;
  20.     width: 300px;
  21.     flex-wrap: wrap;
  22. }
  23. .title {
  24.     font-size: 20px;
  25.     margin: 5px;
  26. }
复制代码

index.js
  1. export default {
  2.     data: {
  3.         v:"",
  4.         txtArray: [
  5.             {txt:"0"},
  6.         ]
  7.     },
  8.     onShow(){},
  9.     changeNum(e){
  10.         this.v = e.value;
  11.         console.log(this.v + "监听输入结果")
  12.     },

  14.     submit(){
  15.         let sr = this.v;
  16.         console.info("获取："+ sr)
  17.         this.txtArray.push({
  18.             txt:sr
  19.         })
  20.         this.v = "";
  21.     },

  23.     //    倒序
  24.     dateSort:function(array){
  25.         for (let a = 0; a < this.txtArray.length; a++) {
  26.             for (let b = a; b < this.txtArray.length; b++) {
  27.                 if (Number(this.txtArray[a].txt) > Number(this.txtArray[b].txt)) {
  28.                     let arrObj = this.txtArray[a].txt;
  29.                     this.txtArray[a].txt = this.txtArray[b].txt;
  30.                     this.txtArray[b].txt = arrObj;
  31.                 };
  32.             }

  34.         }
  35.     },
  36.     sortClick(){
  37.         this.txtArray = this.dateSort(this.txtArray);
  38.     }
  39. }
复制代码

三、示例效果
３.png
附件：
HarmonyOS应用开发--排序练习.docx
(151.22 KB, 下载次数: 0)

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友