vue_watch监视_计算属性_比较大小

最新推荐文章于 2024-06-13 23:47:14 发布

若云止水

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量83

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41812346/article/details/130185799

版权

watch 监视比较大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3>比较大小</h3>
    <span>a:</span>
    <input  type="text" v-model="a" />
    <span>b:</span>
    <input type="text" v-model="b" />
    <h3>结果:{{result}}</h3>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   const vm = new Vue(
       {
           el: "#app",
           data: {
               a: 0,
               b: 0,
               result: ""
           },
           watch:{
               a:{
                   immediate:true,
                   handler( newValue,oldValue ){
                       let rs = this.a - this.b;
                       if( rs < 0){
                           this.result = "a < b";
                       }else if( rs > 0 ){
                           this.result = "a > b";
                       }else {
                           this.result = "a = b"
                       }
                   }
               },
               b:{
                   immediate:true,
                   handler( newValue,oldValue ){
                       let rs = this.a - this.b;
                       if( rs < 0){
                           this.result = "a < b";
                       }else if( rs > 0 ){
                           this.result = "a > b";
                       }else {
                           this.result = "a = b"
                       }
                   }
               }
           }
       }
   );
</script>
</body>
</html>

计算属性比较大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3>比较大小</h3>
    <span>a:</span>
    <input  type="text" v-model="a" />
    <span>b:</span>
    <input type="text" v-model="b" />
    <h3>结果:{{result}}</h3>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   const vm = new Vue(
       {
           el: "#app",
           data: {
               a: 0,
               b: 0,

           },
           computed:{
               result:{
                   get(){
                       let rs = this.a - this.b;
                       if( rs < 0){
                           return "a < b";
                       }else if( rs > 0 ){
                           return "a > b";
                       }else {
                           return "a = b";
                       }
                   },
                   set(val){}
               }
           }
       }
   );
</script>
</body>
</html>