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

旧约Alatus

已于 2023-11-28 21:45:41 修改

阅读量1k

点赞数 26

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript vue js 前端框架 html

于 2023-11-28 16:27:01 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134670819

版权

前端同时被 2 个专栏收录

328 篇文章 2 订阅

订阅专栏

VUE框架

249 篇文章 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>