Vue.jsのクリックイベント
HTML
<div id="app1">
<button v-on:click="bark('ワンワン')">犬</button><br>
</div>
JavaScript
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
bark: (msg)=>{
console.log(msg);
alert(msg);
}
}
})
});
デモ
HTMLエスケープしないでバインドする。 | XSSサニタイズを行わないバインド | v-html
<div v-html="err_msg"></div>
参考サイト
Vue.js | テキストエリア
HTML
<div id="app1">
<div style="white-space:pre-wrap; word-wrap:break-word;">{{ text1 }}</div>
<textarea v-model="text1" style="width:50%;height:100px"></textarea>
</div>
JavaScript
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
text1: '奄美大島に生息\n改行→アマミノクロウサギ\tタブのテストAA
',
},
})
});
改行はスタイルの「white-space:pre-wrap; word-wrap:break-word;」で対応している。
Demo
動的に後からvueオブジェクトのdataにバインドを追加する
HTML
<div id="app1">
<div>{{animal1}}</div>
<input type="button" value="動的にバインドを追加" class="btn btn-success btn-xs" onclick="testFunc1();" />
<div id="div1">
<span>{{animal2}}</span>
<input v-model="animal2">
</div>
</div>
JavaScript
var vueApp; // vue.js
jQuery(() => {
vueApp = new Vue({
el: '#app1',
data: {
animal1:'トウキョウサンショウウオ',
},
});
});
// 外部からデータを変更してみる
function testFunc1(){
vueApp.$set('animal2', 'シリケンイモリ');
}
Demo
vue.jsでバインドしている要素群をjQuryで移動させてみる
Demo
vue.jsと関連付けている区画要素をjQueryのinsertAfterメソッドで移動しても、vue.jsのバインドは切れていない。
HTML
<div id="app1">
<div>{{ message1 }}</div>
<input v-model="message1">
</div>
<input type="button" value="app1要素を青四角の下へ" onclick="test1()" class="btn btn-primary btn-xs" />
<input type="button" value="app1要素を赤四角の下へ" onclick="test2()" class="btn btn-danger btn-xs" />
<div id="box1" style="width:300px;height:100px;background-color:blue"></div>
<div id="box2" style="width:300px;height:100px;background-color:red"></div>
JavaScript
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
message1: 'ヌガー',
}
})
});
// クリックイベント
function test1(){
$('#app1').insertAfter('#box1');
}
//クリックイベント
function test2(){
$('#app1').insertAfter('#box2');
}
vue.jsによるテーブル
Demo
html
<div id="app1">
<table>
<thaed>
<tr><th>ID</th><th>名前</th><th>数値</th></tr>
</thaed>
<tbody>
<tr v-for="ent in data">
<td v-for="(value, key) in ent">{{ value }}</td>
</tr>
</tbody>
</table>
</div>
JavaScript
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
data:[
{id:100, fish_name:'グルクン', fish_price:200},
{id:101, fish_name:'フィーフチャー', fish_price:300},
{id:102, fish_name:'ミーバイ', fish_price:400},
{id:103, fish_name:'グルクマー', fish_price:200},
]
}
})
});
vue.jsによるテーブル | 追加と削除
Demo
html
<div id="app1">
<table class="tbl2">
<thaed>
<tr><th>ID</th><th>名前</th><th>数値</th><th></th></tr>
</thaed>
<tbody>
<tr v-for="(ent, index) in data">
<td v-for="(value, key) in ent">{{ value }}</td>
<td><button v-on:click="deleteAction(index)" class="btn btn-danger btn-xs">削除</button></td>
</tr>
</tbody>
</table>
<input type="button" v-on:click="addAction()" value="追加" class="btn btn-success"/>
</div>
JavaScript
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
data:[
{id:100, fish_name:'グルクン', fish_price:200},
{id:101, fish_name:'フィーフチャー', fish_price:300},
{id:102, fish_name:'ミーバイ', fish_price:400},
{id:103, fish_name:'グルクマー', fish_price:200},
]
},
methods: {
deleteAction:(index)=>{
app.data.splice(index, 1);
},
addAction:()=>{
let newRow = {id:900, fish_name:'追加テスト', fish_price:999};
app.data.push(newRow);
}
}
})
});
vue.jsによるテーブル | 行中にセレクトボックスあり(SELECT要素)
Demo
html
<div id="app1">
<table class="tbl2">
<thaed>
<tr><th>ID</th><th>名前</th><th>SELECT</th><th></th></tr>
</thaed>
<tbody>
<tr v-for="(ent, index) in data">
<td>{{ent.id}}</td>
<td>{{ent.fish_name}}</td>
<td>
<select v-model="ent.fish_type">
<option value="1">沖縄</option>
<option value="2">山口</option>
<option value="3">大間</option>
</select>
</td>
<td><button v-on:click="deleteAction(index)" class="btn btn-danger btn-xs">削除</button></td>
</tr>
</tbody>
</table>
<input type="button" v-on:click="addAction()" value="追加" class="btn btn-success"/>
</div>
JavaScript
var app; // vue.js
jQuery(() => {
app = new Vue({
el: '#app1',
data: {
data:[
{id:100, fish_name:'グルクン', fish_type:1},
{id:101, fish_name:'本マグロ', fish_type:3},
{id:102, fish_name:'トラフグ', fish_type:2},
{id:103, fish_name:'グルクマー', fish_type:1},
]
},
methods: {
deleteAction:(index)=>{
app.data.splice(index, 1);
},
addAction:()=>{
let newRow = {id:900, fish_name:'追加テスト', fish_price:999};
app.data.push(newRow);
}
}
})
});
vue.jsによるテーブル | 行中にセレクトボックス その2
Demo
html
<div id="app1">
<table class="tbl2">
<thaed>
<tr><th>ID</th><th>名前</th><th>SELECT</th><th></th></tr>
</thaed>
<tbody>
<tr v-for="(ent, index) in data">
<td>{{ent.id}}</td>
<td>{{ent.fish_name}}</td>
<td>
<select v-model="ent.fish_type">
<option v-for="(value, key) in fishTypeList" v-bind:value="key">{{value}}</option>
</select>
</td>
<td><button v-on:click="deleteAction(index)" class="btn btn-danger btn-xs">削除</button></td>
</tr>
</tbody>
</table>
<input type="button" v-on:click="addAction()" value="追加" class="btn btn-success"/>
</div>
JavaScript
var app; // vue.js
jQuery(() => {
let fishTypeList = {1:'なは', 2:'やまぐち', 3:'おおま'};
app = new Vue({
el: '#app1',
data: {
data:[
{id:100, fish_name:'グルクン', fish_type:1},
{id:101, fish_name:'本マグロ', fish_type:3},
{id:102, fish_name:'トラフグ', fish_type:2},
{id:103, fish_name:'グルクマー', fish_type:1},
],
fishTypeList:fishTypeList,
},
methods: {
deleteAction:(index)=>{
app.data.splice(index, 1);
},
addAction:()=>{
let newRow = {id:900, fish_name:'追加テスト', fish_price:999};
app.data.push(newRow);
}
}
})
});
セレクトボックスのチェンジイベント | SELECT onchange
Demo
HTML
<select v-model='cat_type' v-on:change="testChange('猫')">
<option v-for="(value, key) in catTypeList" v-bind:value="key">{{value}}</option>
</select>
<div>{{res}}</div>
JavaScript
var app; // vue.js
jQuery(() => {
let catTypeList = {
1:'三毛猫',
2:'シャムトラ',
3:'鯖トラ',
4:'白黒',
};
app = new Vue({
el: '#app1',
data: {
catTypeList:catTypeList,
cat_type:2,
res:'',
},
methods:{
testChange:(name)=>{
app.res = name + '→' + app.catTypeList[app.cat_type];
}
}
})
});
xxx
- ホーム
- プログラミングの覚書
- JavaScriptの覚書
- Vue.jsの覚書