<script src="vue.min.js"></script>
～ 略 ～
<div id="app-1">
<input type="text" v-model="search_word" placeholder="簡易検索">
<table class="table">
<thead>
<tr>
<th v-for="(value, key) in clms" @click="sort(key)">
{{value}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="animal in filteredData">
<td v-for="(value, key) in clms">{{animal[key]}}</td>
</tr>
</tbody>
</table>
</div>
window.onload = function() {
var clms = {
id: 'ID',
name: '市町村名',
code: 'コード',
};
var animals = [
{id:5,name:'ゴリラ',code:'gorira'},
{id:6,name:'ローランドニシゴリラ',code:'l_west_gorira'},
{id:7,name:'ナウマンゾウ',code:'nauman-elephant'},
{id:8,name:'ハダカネズミ',code:'hadaka-nezumi'},
];
var sortOrders = [];// 順序データ
for(var key in clms){
sortOrders[key] = 1;
}
var app2 = new Vue({
el: '#app-1',
data: {
clms:clms,
animals: animals,
sortOrders: sortOrders,
search_word: '', // 簡易検索
},
methods: {
sort: function(sortKey) { // 列名クリックイベント：一覧をソートする
// 並び順の切替（昇順、降順を切り替える）
this.sortOrders[sortKey] = this.sortOrders[sortKey] * -1;
var data = this.animals;
var order = this.sortOrders[sortKey];
// 並べ替え処理
data = data.slice().sort(function(a, b){
a = a[sortKey];
b = b[sortKey];
return (a === b ? 0 : a > b ? 1 : -1) * order;
});
this.animals = data; // データを更新。更新しないと一覧に反映されない。
}
},
computed: {
filteredData: function () {
var data = this.animals; // 元データに影響を与えないようdataにクローンコピーする。
var filterWord = this.search_word.toLowerCase(); // 簡易検索を取得する。（テキストボックスと連動されている）
if(filterWord) {
// dataに対し、簡易検索で絞り込みを行う。全列が検索対象。
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterWord) > -1
})
})
}
return data;
}
}
});
}
HTML
<div id="app1">
<div>{{ message1 }}</div>
<input v-model="message1">
<div v-bind:title="text1">アマミノクロウサギ:title属性にセット</div>
<div v-bind:class="class1">サキシマハブ:クラス属性にセット</div>
</div>
JavaScript
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
message1: 'リュウキュウオオコウモリ',
text1: '奄美大島に生息',
class1: 'text-danger'
}
})
});
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
message1: 'リュウキュウオオコウモリ',
text1: '奄美大島に生息',
class1: 'text-danger'
}
})
});
// 外部からデータを変更してみる
function testFunc1(){
app.message1 = "ヌマエビ";
}
<div>{{ message1 | fil1}}</div>
app = new Vue({
el: '#app1',
data: {
message1: 'リュウキュウオオコウモリ',
text1: '奄美大島に生息',
class1: 'text-danger'
},
filters: {
fil1: (value) => {
if (!value) return ''
return 'ﾌｨﾙﾀ【' + value + '】';
}
}
})
<div>{{ message1 | fil1 | fil2 | fil3}}</div>
<div id="app2">
<div v-if="flg1">{{ message1 }}</div>
<button v-on:click="testFunc2" class="btn btn-success">関数テスト2</button>
</div>
var app2 = new Vue({
el: '#app2',
data: {
message1: 'タヌキ',
flg1: false,
},
methods: {
testFunc2: () => {
if(this.flg1){
this.flg1 = false;
}else{
this.flg1 = true;
}
}
}
});
v-ifとv-showの違い
v-showは要素を見た目的に表示したり隠したりするだけ。隠しても要素そのものは実在する。(display:none)
<div v-if="flg_a">flg_aが空でないなら、この要素を表示する</div>
<div v-if="flg_a==false">flg_aが空の時、この要素は存在する</div>
<div v-show="flg_a==2">flg_aが2のとき、この要素を表示する</div>
<div v-show="flg_a==false">flg_aが空の時、この要素は隠れる。（実在はする）</div>
例
HTML
<div id="app2">
<div v-if="flg1">{{ message1 }}</div>
<button v-on:click="testFunc2" class="btn btn-success">関数テスト2</button>
</div>
var app2 = new Vue({
el: '#app2',
data: {
message1: 'タヌキ',
flg1: false,
},
methods: {
testFunc2: () => {
if(this.flg1){
this.flg1 = false;
}else{
this.flg1 = true;
}
}
}
});
<div id="app1">
<div>{{ message1 }}</div>
<input id="text1" v-model="message1">
<div>{{ message2 }}</div>
<input id="text2" v-model="message2">
</div>
<input type="button" value="jQueryにてセット" class="btn btn-success" onclick="test1()" />
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
message1: 'リュウキュウオオコウモリ',
message2: 'タナガー',
}
})
});
function test1(){
$('#text1').val('jQueryにてセット');
$('#text1')[0].dispatchEvent(new Event('input')); // vue.js側に変更をイベント発信する
$('#text2').val('jQueryにてセット');
$('#text2')[0].dispatchEvent(new Event('input'));
}
「dispatchEvent」はセットのたびに呼び出さなければならないようである。
<div id="app1">
<label v-for="(value, key) in animalTypeList">
<input type="radio" name="ent.animal_type" v-model='ent.animal_type' v-bind:value="key" >{{value}}
</label>
<br>
<div>{{ent.animal_type}}</div>
<div>{{ animalTypeList[ent.animal_type] }}</div>
</div>
var app; // vue.js
jQuery(() => {
let animalTypeList = {1:'哺乳類', 2:'魚類', 3:'両生類', 4:'爬虫類', 5:'鳥類'};
let ent = {id:100, animal_type:2, animal_name:'ネオンテトラ'};
app = new Vue({
el: '#app1',
data: {
animalTypeList: animalTypeList,
ent,
}
})
});
<div id="app1"> <div style="margin-bottom:10px"> <p>チェックボックス</p> <input type="checkbox" v-model="flg_a" true-value="1" false-value="0">フラグA <div>flg_a = <span class="text-success">{{flg_a}}</span></div> </div> <div style="margin-bottom:10px"> <p>ラジオボタン</p> <input type="radio" id="aka_neko" value="1" v-model="cat_type"> <label for="aka_neko">赤猫</label> <input type="radio" id="kuro_neko" value="2" v-model="cat_type"> <label for="kuro_neko">黒猫</label> <div>cat_type = <span class="text-success">{{cat_type}}</span></div> </div> </div>
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
flg_a: 1,
cat_type: 2,
},
})
});