Question

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

如您所见，有两个标签（[% 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: ["[%","%]"]
})

我怎样才能做到这一点？

Answer 1

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

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

1 个答案: