是否可以使用Vue.js将数据从模板发送到脚本？ （v-bind的倒数）

Question

我想知道是否可以将v-for循环中的当前数据（在模板中）发送到例如方法中的函数。

<li v-for="annonce in annonces">

    <article>
    //Here for example I want to send annonce.categorie to the methods 
    //object of the component to change the color in function of the 
    //anonce.categorie string
        <a v-bind:style="['color' : {{getColorCat(annonce)}}]"> 
        {{annonce.categorie}}
        </a> 
    </article>

</li>

编辑 只需添加带有参数的函数以发送v-bind：style，然后创建一个方法即可返回循环中当前元素的函数的字符串颜色。

<a v-bind:style="getStyle(annonce)">{{annonce.categorie}}</a>


  methods:{

    getStyle(annonce) {
    return { color: this.getColorCat(annonce) };
    },

    getColorCat(annonce) {

      switch(annonce.categorie)
      {
        case this.categories[0] :
        return 'limegreen'
        break;

        case this.categories[1] :
        return 'grey'
        break;

        case this.categories[2] :
        return 'deepskyblue'
        break;

        case this.categories[3] :
        return '#E3E01F'
        break;

        case this.categories[4] :
        return 'silver'
        break;

        case this.categories[5] :
        return 'pink'
        break;

        case this.categories[6] :
        return 'red'
        break;

        case this.categories[7] :
        return 'green'
        break;

        case this.categories[8] :
        return 'purple'
        break;

        case this.categories[9] :
        return 'magenta'
        break;
        default :
      }
    }
  },

Answer 1

是的，您可以直接做到这一点

<ul>
    <li v-for="(item, index) in items">
        {{getText(index)}}
    </li>
</ul>

和方法

methods: {
    getText(index) {
        return someFunctionOf(index);
    }
}

已更新为添加：

您还可以使用方法设置属性值，但是示例中的语法错误。有几种解决方法，但是一种方法是：

<a v-bind:style="getStyles(annonce)">

然后返回具有相关样式的对象

methods: {
    getStyles(annonce) {
        return { color: getColorCat(annonce) };
    }
}