中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
一、创建项目 二、示例代码 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); } }
三、示例效果
微信扫码分享