VUE框架使用监听监视的方式实现对输入的数字比大小------VUE框架

以你之姓@ 2024-02-17 11:44 55阅读 0赞

> ###  ###
> 
>     <!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>