フィルターでマッチしたテキストを赤くする
<div id="app"> <input v-model="filterText"> <ul> <li v-for="player in filterPlayers" v-html="player"></li> </ul> </div>
new Vue({ el: '#app', data: { players: [ { "age": 24, "name": "Ryu" }, { "age": 24, "name": "Ken" }, { "age": 25, "name": "Guile" } ], filterText: '' }, computed: { filterPlayers() { if (!/^\w+$/.test(this.filterText) && this.filterText !== '') return const reg = new RegExp(this.filterText, 'i') return this.players.filter(v => v.name.match(reg)).map(v => { return v.name.replace(reg, '<b style="color: red;">$&</b>') }) } } })