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> 

ジャバスクリプト（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: ["[%","%]"] 
})