Vue.js(5)：方法、计算属性和监听_当输入用户名、商品价格和商品数目时,使用方法、计算属性、监听获取的商品有-CSDN博客

本文链接：https://blog.csdn.net/dawn0718/article/details/120689003

　　在Vue.js中，同样的效果可以使用不同的手段来实现，比如下面的计算：

　　为了练习功能，没有做其他的判断比如除数是否为0或者输入了字母等，只是简单地通过方法、计算属性或者监听来实现两个数的相除。

　　一、使用方法来做：

<!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>方法、计算属性和监听_方法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div>
            请输入被除数：<input type="text" v-model="add1"/>
        </div>
        <div>
            　请输入除数：<input type="text" v-model="add2"/>
        </div>
        <div>两数相除结果：{{divResult()}}</div>
    </div>
    <script>
        //声明数据对象
        const vueDataObj={
            add1:1,
            add2:2,
        };
        //声明方法
        var methods={
            divResult(){
                    var result=this.add1/this.add2;
                    return result;
            }
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods,
            computed:{}
        });
    </script>
</body>
</html>

　　二、使用计算属性来做：

<!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>方法、计算属性和监听_计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div>
            请输入被除数：<input type="text" v-model="add1"/>
        </div>
        <div>
            　请输入除数：<input type="text" v-model="add2"/>
        </div>
        <div>两数相除结果：{{divResult}}</div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            add1:1,
            add2:2,
        };
        //声明方法
        var methods={
        };
        //声明计算属性
        var computed={
            divResult(){
                    var result=this.add1/this.add2;
                    return result;
            }
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods,
            computed,
        });
    </script>
</body>
</html>

　　可以看到，使用方法和计算属性的差别并不大，只是函数移动了一个位置和是否加“()”的差异，可以加参数。

　　三、使用监听来做，稍微有变化，有点麻烦。

　　实现监听①：

<!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>方法、计算属性和监听_监听1</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div>
            请输入被除数：<input type="text" v-model="add1"/>
        </div>
        <div>
            　请输入除数：<input type="text" v-model="add2"/>
        </div>
        <div>两数相除结果：{{divResult}}</div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            add1:1,
            add2:2,
            divResult:0.5,
        };
        //声明方法
        var methods={
        };
        //声明计算属性
        var computed={
        };
        //声明监听
        var watch={
            add1(val,oldval){
                this.divResult=this.add1/this.add2;
            },
            add2(val,oldval){
                this.divResult=this.add1/this.add2;
            }
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods,
            computed,
            watch,
        });
    </script>
</body>
</html>

　　为了实现计算，必须监听两个数据字段，也可以在代码上做下面的变通。

　　实现监听②：

<!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>方法、计算属性和监听_监听2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div>
            请输入被除数：<input type="text" v-model="add1"/>
        </div>
        <div>
            　请输入除数：<input type="text" v-model="add2"/>
        </div>
        <div>两数相除结果：{{divResult}}</div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            add1:1,
            add2:2,
            divResult:0.5,
        };
        //声明方法
        var methods={
            divCalc(val,oldval){
                this.divResult=this.add1/this.add2;
            }
        };
        //声明计算属性
        var computed={
        };
        //声明监听
        var watch={
            calc:'divCalc'
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods,
            computed,
            watch,
        });
    </script>
</body>
</html>

　　如果要是数据对象，那么实现上就有特别的写法，有些参数必须加上。

　　实现监听③：

<!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>方法、计算属性和监听_监听3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div>
            请输入被除数：<input type="text" v-model="calcData.add1"/>
        </div>
        <div>
            　请输入除数：<input type="text" v-model="calcData.add2"/>
        </div>
        <div>两数相除结果：{{calcData.divResult}}</div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            tips:'',//提示信息
            calcData:{
                add1:1,
                add2:2,
                divResult:0.5,
            },
        };
        //声明方法
        var methods={
            calc(calcObj){
                calcObj.divResult=calcObj.add1/calcObj.add2;
            }
        };
        //声明计算属性
        var computed={
        };
        //声明监听
        var watch={
            calcData:{
                handler:'calc',
                deep:true,//深度监听
                immediate:true,//有初始值
            },
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods,
            computed,
            watch,
        });
    </script>
</body>
</html>

　　如果需要同时监听多个对象怎么办？可以如下的方式进行：

　　实现监听④：

<!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>方法、计算属性和监听_监听4</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div>
            请输入被除数：<input type="text" v-model="calcData.add1"/>
        </div>
        <div>
            　请输入除数：<input type="text" v-model="calcData.add2"/>
        </div>
        <div>两数相除结果：{{calcData.divResult}}</div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            tips:'',//提示信息
            calcData:{
                add1:1,
                add2:2,
                divResult:0.5,
            },
        };
        //声明方法
        var methods={
            calcAdd1(calcObj){
                calcObj.divResult=calcObj.add1/calcObj.add2;
            },
            calcAdd2(calcObj){
                calcObj.divResult=calcObj.add1/calcObj.add2;
            },
        };
        //声明计算属性
        var computed={
        };
        //声明监听
        var watch={
            calcData:[{
                handler:'calcAdd1',
                deep:true,//深度监听
                immediate:true,//有初始值
            },{
                handler:'calcAdd2',
                deep:true,//深度监听
                immediate:true,//有初始值
            }]
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods,
            computed,
            watch,
        });
    </script>
</body>
</html>