Fatal编程技术网

Javascript VueJS计算

javascript vue.js

Javascript VueJS计算,javascript,vue.js,Javascript,Vue.js,我目前正在使用VueJS创建一个小型计算器应用程序，这也是我第一次使用VueJS 然而，我想知道我是否真的在做正确的事情，因为我目前有以下代码： export default{ name:'app', data(){ return{ form:{ sitetype:"Standard", designChoices:"Template", speed:"Less than 1 month",

我目前正在使用VueJS创建一个小型计算器应用程序，这也是我第一次使用VueJS

然而，我想知道我是否真的在做正确的事情，因为我目前有以下代码：

export default{
name:'app',
data(){
    return{
        form:{
            sitetype:"Standard",
            designChoices:"Template",
            speed:"Less than 1 month",
            pages:1,
            copywriting:"",
            features:[]
        },
        options:{
             sitetype:[
                {text:"Standard",         price:{low:800, high:1500}},
                {text:"E-Commerce",       price:{low:2000,high:4000}},
                {text:"Custom Production",price:{low:5000,high:8000}}
            ],
            designChoices:[
                {text:"Template",     price:{low:200, high:500}},
                {text:"Custom Design",price:{low:1200,high:2000}}
            ],
            speed:[
                {text:"Less than 1 month",   price:{low:1000,high:3000}},
                {text:"Around 1 to 2 months",price:{low:500, high:1000}},
                {text:"More than 2 months",  price:{low:250, high:500}}
            ],
            features:[
                {id:"seo",price:{low:250,high:500}, text:"Search Engine Optimisation (SEO)"},
                {id:"smo",price:{low:400,high:800}, text:"Social Media Optimisation (SMO)"},
                {id:"mail",price:{low:150,high:300}, text:"Mail Setup"},
                {id:"gallery",price:{low:250,high:500}, text:"Image/Sliders Gallery"},
            ]
        }
    }
},
computed:{
//Calculate Mimimum Price
    calcMin(){
        var featuresPrice = 0,
            priceIndex = 0,
            copywriting = this.form.copywriting == "Yes" ? 2.5 : 1;
        //Feature Loop
        this.form.features.forEach(feature=>{
            this.options.features.forEach(featureCheck=>{
                if(feature == featureCheck.text){
                    featuresPrice += featureCheck.price.low
                    priceIndex++;
                }
            });
        });
        //Calculate all the values!
        var minPrice = featuresPrice + ((this.form.pages * 50) * copywriting);
        return minPrice;
    },
    //Calculate Maximum Price
    calcMax(){
        return "To Be Filled";
    }
  }
}

methods:{
    calcPrice(isMin){
    //Calculate CopyWriting
        var copywriting = this.form.copywriting == "Yes" ? (isMin ? 2.5 : 5) : 1;
        //Calculate Features
            var otherPrice = 0;
            for(var option in this.options){
                if ("features" == option){
                    var featuresPrice = this.form[option].reduce((total,current)=>{
                        var optionFeatures = this.options[option].filter(featureCheck => featureCheck.text == current);
                        optionFeatures.forEach(check=>{
                            otherPrice += isMin ? check.price.low : check.price.high;
                        });
                        return otherPrice;
                    },0);
                }else{
                //Calculate Options
                    for(var index in this.options[option]){
                    var getOption = this.options[option][index];
                        if(getOption.text == this.form[option]){
                            otherPrice += isMin ? getOption.price.low : getOption.price.high;
                        }
                    }
                }
            };
            //Calculate The Total Price + Pages
            var price = otherPrice + ((this.form.pages * (isMin ? 50 : 150)) * copywriting);
            return price;
    }
},
computed:{
    //Calculate Mimimum Price
    calcMin(){return this.calcPrice(true);},
    //Calculate Maximum Price
    calcMax(){return this.calcPrice(false);}
}
与此JSFIDLE上的完整代码示例相比，此代码被最小化：

在这里，我想重点介绍计算的部分。在这里，我在循环中使用一个循环来确认我的数据，并从总共12个特性中检索价格（但对于本例，只有4个，完整的功能可以在JSFIDLE上找到）

因此，对于循环中的循环，我将确认每个部分，以使价格加起来，但是我还需要对其他3个组件以及3个下拉框（sitetype、designChoices、Speed）执行此操作

我认为，复制循环以获得这种效果肯定不是正确的方法，因此这里真正的问题是：我如何正确地使用或更改代码，以便能够正确地提供数据以及使用与该数据关联的价格进行计算

提前感谢您提供更多信息

编辑：

现在我更进一步，得到了计算的代码：

computed:{
//Calculate Mimimum Price
    calcMin(){
        var copywriting = this.form.copywriting == "Yes" ? 2.5 : 1;
        var otherPrice = 0;
        for(var option in this.options) {
            if ("features" == option) {
                var featuresPrice = this.form[option].reduce((total,current)=>{
                    var optionFeatures = this.options[option].filter(featureCheck => featureCheck.text == current);
                    optionFeatures.forEach(check=>{otherPrice += check.price.low});
                    return otherPrice;
                },0);
            }else{
                for(var index in this.options[option]){
                    if(this.options[option][index].text == this.form[option]){
                        otherPrice += this.options[option][index].price.low;
                    }
                }
            }
        };
        //Calculate the price
        var minPrice = otherPrice + ((this.form.pages * 50) * copywriting);
        return minPrice;
    },
//Calculate Maximum Price
    calcMax(){
        var copywriting = this.form.copywriting == "Yes" ? 5 : 1;
        var otherPrice = 0;
        for(var option in this.options) {
            if ("features" == option) {
                var featuresPrice = this.form[option].reduce((total,current)=>{
                    var optionFeatures = this.options[option].filter(featureCheck => featureCheck.text == current);
                    optionFeatures.forEach(check=>{otherPrice += check.price.high});
                    return otherPrice;
                },0);
            }else{
                for(var index in this.options[option]) {
                    if(this.options[option][index].text == this.form[option]){
                        otherPrice += this.options[option][index].price.high;
                    }
                }
            }
        };
        //Calculate the price
        var maxPrice = otherPrice + ((this.form.pages * 150) * copywriting);
        return maxPrice;
    },
}
我的问题是，它是否可以写得更简单或更简单，如中所示，我是否可以将两种计算结合起来，只更改几个变量，如price.low/price.high等？如果是这样的话，我将如何准确地执行此操作

更新的JS小提琴：

编辑2：

经过更多的工作和研究，我现在有了以下代码：

export default{
name:'app',
data(){
    return{
        form:{
            sitetype:"Standard",
            designChoices:"Template",
            speed:"Less than 1 month",
            pages:1,
            copywriting:"",
            features:[]
        },
        options:{
             sitetype:[
                {text:"Standard",         price:{low:800, high:1500}},
                {text:"E-Commerce",       price:{low:2000,high:4000}},
                {text:"Custom Production",price:{low:5000,high:8000}}
            ],
            designChoices:[
                {text:"Template",     price:{low:200, high:500}},
                {text:"Custom Design",price:{low:1200,high:2000}}
            ],
            speed:[
                {text:"Less than 1 month",   price:{low:1000,high:3000}},
                {text:"Around 1 to 2 months",price:{low:500, high:1000}},
                {text:"More than 2 months",  price:{low:250, high:500}}
            ],
            features:[
                {id:"seo",price:{low:250,high:500}, text:"Search Engine Optimisation (SEO)"},
                {id:"smo",price:{low:400,high:800}, text:"Social Media Optimisation (SMO)"},
                {id:"mail",price:{low:150,high:300}, text:"Mail Setup"},
                {id:"gallery",price:{low:250,high:500}, text:"Image/Sliders Gallery"},
            ]
        }
    }
},
computed:{
//Calculate Mimimum Price
    calcMin(){
        var featuresPrice = 0,
            priceIndex = 0,
            copywriting = this.form.copywriting == "Yes" ? 2.5 : 1;
        //Feature Loop
        this.form.features.forEach(feature=>{
            this.options.features.forEach(featureCheck=>{
                if(feature == featureCheck.text){
                    featuresPrice += featureCheck.price.low
                    priceIndex++;
                }
            });
        });
        //Calculate all the values!
        var minPrice = featuresPrice + ((this.form.pages * 50) * copywriting);
        return minPrice;
    },
    //Calculate Maximum Price
    calcMax(){
        return "To Be Filled";
    }
  }
}

methods:{
    calcPrice(isMin){
    //Calculate CopyWriting
        var copywriting = this.form.copywriting == "Yes" ? (isMin ? 2.5 : 5) : 1;
        //Calculate Features
            var otherPrice = 0;
            for(var option in this.options){
                if ("features" == option){
                    var featuresPrice = this.form[option].reduce((total,current)=>{
                        var optionFeatures = this.options[option].filter(featureCheck => featureCheck.text == current);
                        optionFeatures.forEach(check=>{
                            otherPrice += isMin ? check.price.low : check.price.high;
                        });
                        return otherPrice;
                    },0);
                }else{
                //Calculate Options
                    for(var index in this.options[option]){
                    var getOption = this.options[option][index];
                        if(getOption.text == this.form[option]){
                            otherPrice += isMin ? getOption.price.low : getOption.price.high;
                        }
                    }
                }
            };
            //Calculate The Total Price + Pages
            var price = otherPrice + ((this.form.pages * (isMin ? 50 : 150)) * copywriting);
            return price;
    }
},
computed:{
    //Calculate Mimimum Price
    calcMin(){return this.calcPrice(true);},
    //Calculate Maximum Price
    calcMax(){return this.calcPrice(false);}
}
更新的JSFIDLE:

所以我想知道这段代码是否可以进一步优化或更改，以使其在VueJS方面更好？或者这段代码可以接受吗？

您可能希望将循环转换为一个
方法，然后可以使用参数调用该方法，这样您就不需要复制循环部分。很好的调用，我目前已经像下面这样做了
var featuresPrice=this.form.features.reduce（（状态、特征、索引、数组）=>{var optionFeatures=this.options.features.filter（featureCheck=>featureCheck.text==feature）；optionFeatures.forEach（check=>{state+=check.price.low}）；var speedFeature=this.options.speed.filter（speedCheck=>speedCheck.text==feature）；speedFeature.forEach（speed=>{state+=check.speed.low}）；return state；}，0）；
但将其放入方法中可能会更好。欢迎使用任何示例！您可以使用
this.options.features来代替
this.options[TheCharacter]
其中
的性质是
速度
，
设计选择
，等等。这将允许您创建一种方法来轻松检索这些内容。@a.Lau按照您的建议做了一些更改，欢迎您提出进一步的建议！