Question

我有一个列表和导航，基于数据行的数量，每页12个项目。

我的导航按钮触发vue-js v-on：click事件

我也尝试在JS文件中动态生成函数方法，但似乎无法在方法部分中放入循环语句。不断收到语法错误。

vueJS方法部分中是否有特定的JS语法？

def binning(bin):
    if bin < 10:
        return '0-9.99'
    if 10 <= bin < 20:
        return '10-19.99'
    if 20 <= bin < 40:
        return '20-39.99'
    if 40 <= bin < 60:
        return '40-59.99'
    if 60 <= bin < 80:
        return '60-79.99'
    if 80 <= bin < 100:
        return '80-99.99'
    if 100 <= bin < 150:
        return '100-149.99'
    if 150 <= bin < 300:
        return '150-299.99'
    if 300 <= bin < 500:
        return '300-499.99'
    if bin >= 500:
        return '500+'
    else:
        return 'other'

如果有帮助，我也会使用Laravel框架。

谢谢

Answer 1

很明显，您想动态添加方法，但不清楚您在动态方法附件代码中正在做什么。因此，我将向您展示一种动态添加方法的方法，例如：

var methods = {
    greet() {
        console.log(this.message + ' from greet method.');
    }
};

for (let x = 0; x < 2; x++)  {
    methods['featuredStores'+x] = function() {
        console.log(this.message + ' from featuredStores'+x+' method.');
    }
}

请注意，methods['featuredStores'+x]实际上是通过在循环内将x的值与字符串featuredStores串联而形成方法名称的，因此x的值是第一次是0，它产生featuredStores0，第二次x的值是1，所以它产生featuredStores0，最后有三种方法：

greet // hard coded
featuredStores0 // added dynamically within the loop
featuredStores1 // added dynamically within the loop

现在，在创建methods实例时，您需要添加Vue对象作为新实例的属性，例如：

var demo = new Vue({
    el: '#demo',
    methods: methods, // or just methods
    data:{
        message: "Hello World"
    }
});

要查看实际效果，请运行以下代码段（希望这会给您一些想法）：

var methods = {
    greet() {
        console.log(this.message + ' from greet method.');
    }
};

for (let x = 0; x < 2; x++)	 {
    methods['featuredStores'+x] = function() {
        console.log(this.message + ' from featuredStores'+x+' method.');
    }
}

var demo = new Vue({
    el: '#demo',
    methods,
    data:{
        message: "Hello World"
    },
    created() {
    	this.greet();
        this.featuredStores0();
	this.featuredStores1();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.8.6/vue.min.js"></script>
<div id="demo">
    {{message}}
</div>

VueJS-方法内部的动态函数名称

1 个答案: