JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<table id="app">
<thead>
<tr>
<th>ファイル名</th>
</tr>
</thead>
<tbody>
<tr v-for='(file,index) in files'>
<td v-bind:class='{noneflag : flag[index].val}' v-text='files[index]'></td>
</tr>
<tr>
<td>
<button v-on:click='btn'>hoge</button>
</td>
</tr>
</tbody>
</table>
</body>
CSS
.noneflag {display:none;}
JavaScript
var demo = new Vue({
el: '#app', // 関連付けるDOMを設定する
data: { // 紐付けるデータを定義
'files': [1,2,3,4,5,6,7,8,9], // テーブルへ表示するデータ
// 'flag': {0:[true,false,true,false,true,false,true,false,true] } // ファイル名表示フラグ
'flag':[{val:true},{val:false},{val:true},{val:false},{val:true},{val:false},{val:true},{val:false},{val:true}]
},
methods:{
btn:function(event){
//this.flag[0].val=false;
for(i=0;i<this.flag.length;i++){
this.flag[i].val = !this.flag[i].val
}
}
}
})