HarmonyOS应用开发--排序练习

鸿蒙时代
发布于 2022-6-8 15:22
浏览
0收藏

HarmonyOS应用开发--排序练习-鸿蒙开发者社区
HarmonyOS应用开发--排序练习-鸿蒙开发者社区
一、创建项目
二、示例代码
index.hml

<div class="container">
    <input  class="input" type="number" value="{{v}}" on:change="changeNum"></input>
    <input type="button" value="提交" onclick="submit"></input>
    <div class="textdiv">
        <text class="title" for="{{txtArray}}">
            <span>{{$item.txt}}</span>
        </text>
    </div>
    <button type="capsule" value="排序" onclick="sortClick"></button>
</div>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

index.css

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.input{
    width: 300px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.textdiv{
    flex-direction: row;
    align-items:center;
    justify-content: center;
    margin: 10px 0px;
    width: 300px;
    flex-wrap: wrap;
}
.title {
    font-size: 20px;
    margin: 5px;
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.

index.js

export default {
    data: {
        v:"",
        txtArray: [
            {txt:"0"},
        ]
    },
    onShow(){},
    changeNum(e){
        this.v = e.value;
        console.log(this.v + "监听输入结果")
    },

    submit(){
        let sr = this.v;
        console.info("获取:"+ sr)
        this.txtArray.push({
            txt:sr
        })
        this.v = "";
    },

    //    倒序
    dateSort:function(array){
        for (let a = 0; a < this.txtArray.length; a++) {
            for (let b = a; b < this.txtArray.length; b++) {
                if (Number(this.txtArray[a].txt) > Number(this.txtArray[b].txt)) {
                    let arrObj = this.txtArray[a].txt;
                    this.txtArray[a].txt = this.txtArray[b].txt;
                    this.txtArray[b].txt = arrObj;
                };
            }

        }
    },
    sortClick(){
        this.txtArray = this.dateSort(this.txtArray);
    }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.

三、示例效果
HarmonyOS应用开发--排序练习-鸿蒙开发者社区

标签
HarmonyOS应用开发--排序练习.docx 151.22K 17次下载
收藏
回复
举报
回复
    相关推荐