第一种:思路实现一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.d1 {
width: 500px;
height: 100px;
border: 2px solid black;
}
.d1 span {
color: red;
}
</style>
</head>
<body>
<div id="app">
<input v-model="number" @blur="change" />
<div class="d1">
<!-- <ul v-for="(item,index) in arr" :key="index">
<li>{{ item }}</li>
</ul> -->
<span>{{show}}</span>
</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
number: "",
show: "",
},
methods: {
change() {
this.$nextTick(() => {
var number1 = "";
var number2 = "";
if (this.number.indexOf("-") != -1) {
number1 = this.number;
n = number1.indexOf("-");
let number2 = number1.slice(n, n + 2);
number1 = number1.split("");
number1.splice(n, 2, number2);
number1.sort(function (a, b) {
return a - b;
});
this.show = number1.join("");
console.log("n", n);
console.log("number1", number1);
console.log("number2", number2);
}
});
},
},
});
</script>
</html>
第二种完整: