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>

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;
}

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);
    }
}

三、示例效果
HarmonyOS应用开发--排序练习-开源基础软件社区

标签
HarmonyOS应用开发--排序练习.docx 151.22K 6次下载
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐