<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h1>数字大小比较</h1> <h1><input type="text" place-holder="数字1" v-model:value="number1"/></h1> <h1><input type="text" place-holder="数字2" v-model:value="number2"/></h1> <h1>比较大小:{{comp}}</h1> </div> <script> const vm = new Vue({ el : "#app", data : { number1 : 0, number2 : 0, comp : "" }, watch : { number1 : { immediate : true, deep : true, handler(newValue,oldValue) { if(newValue > this.number2) { this.comp = "" + newValue + ">" + this.number2; } if(newValue < this.number2) { this.comp = "" + newValue + "<" + this.number2; } if(newValue === this.number2) { this.comp = "" + newValue + "=" + this.number2; } } }, number2 : { immediate : true, deep : true, handler(newValue,oldValue) { if(newValue > this.number1) { this.comp = "" + this.number1 + "<" + newValue; } if(newValue < this.number1) { this.comp = "" + this.number1 + ">" + newValue; } if(newValue === this.number1) { this.comp = "" + this.number1 + "=" + newValue; } } } } }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>数字大小比较</h1>
<h1><input type="text" place-holder="数字1" v-model:value="number1"/></h1>
<h1><input type="text" place-holder="数字2" v-model:value="number2"/></h1>
<h1>比较大小:{{comp}}</h1>
</div>
<script>
const vm = new Vue({
el : "#app",
data : {
number1 : 0,
number2 : 0,
comp : ""
},
watch : {
number1 : {
immediate : true,
deep : true,
handler(newValue,oldValue)
{
if(newValue > this.number2)
{
this.comp = "" + newValue + ">" + this.number2;
}
if(newValue < this.number2)
{
this.comp = "" + newValue + "<" + this.number2;
}
if(newValue === this.number2)
{
this.comp = "" + newValue + "=" + this.number2;
}
}
},
number2 : {
immediate : true,
deep : true,
handler(newValue,oldValue)
{
if(newValue > this.number1)
{
this.comp = "" + this.number1 + "<" + newValue;
}
if(newValue < this.number1)
{
this.comp = "" + this.number1 + ">" + newValue;
}
if(newValue === this.number1)
{
this.comp = "" + this.number1 + "=" + newValue;
}
}
}
}
});
</script>
</body>
</html>
VUE框架使用监听监视的方式实现对输入的数字比大小------VUE框架
于 2023-11-28 16:27:01 首次发布