如何分別爲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（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: ["[%","%]"] 
})