javascript - 如何为vue.js应用程序的每个标签分别运行功能？

我正在发现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（VueJs）：

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: ["[%","%]"]
})

我该如何实现？

最佳答案

use methods（但是您可能需要刷新，因为有时值随机相同：））

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: ["[%","%]"]
})

关于javascript - 如何为vue.js应用程序的每个标签分别运行功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44097605/