如何为vue.js应用程序的每个标记分别运行函数？

Question

我正在发现Vue JS，我想尝试一些东西，在解释之前，查看代码将更容易理解。

https://jsfiddle.net/n4mav0x8/2/

正如您所看到的，有两个标记([% message %])，我想要做的是为列表中的每个标签显示一个随机的颜色，可以吗？

html:

<div id="app-5">

  <div class="color">
    <span class="colorHandler">
      <p>[% message %]</p>
    </span>
  </div>

  <div class="color">
    <span class="colorHandler">
      <p>[% message %]</p>
    </span>
  </div>

  ... # the quantity of these specific '[% message %]' tags may vary.
</div>

javascript (VueJ) :

var colors = "['#e6f0ff', '#000a1a' ,'#ffe680', '#ffcc00', '#ffd9b3']";
var parsed_colors = colors.match(/#[a-f0-9]{6}/g);
var randomIndex = Math.floor(Math.random() * parsed_colors.length); 
var randomElement = parsed_colors[randomIndex];

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: randomElement
  },
  delimiters: ["[%","%]"]
})

我怎样才能做到这一点？

Answer 1

使用方法 (但您可能需要刷新，因为值有时是随机相同的:)

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: null
  },
  methods:{
    randomColor:function(){
        var colors = "['#e6f0ff', '#000a1a' ,'#ffe680', '#ffcc00', '#ffd9b3']";
      var parsed_colors = colors.match(/#[a-f0-9]{6}/g);
      var randomIndex = Math.floor(Math.random() * parsed_colors.length); 
      var randomElement = parsed_colors[randomIndex];
      return randomElement
    }
  },
  delimiters: ["[%","%]"]
})