この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:2
ページ更新者:T
更新日時:2026-06-10 17:35:42

タイトル: メソッドの定義方法
SEOタイトル: 【Vue.js】メソッド(method)の定義方法

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<p>Vue.jsでメソッドを定義して任意の場所で処理を呼び出すことが出来ます。</p>

<p>&nbsp;</p>

<h2>実装例</h2>

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<thead>
		<tr>
			<th scope="col" style="background-color:#ffffff"><span style="color:null">js</span></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff">var app = new Vue({</span></p>

			<p><span style="color:#ffffff">&nbsp; el: '#app',</span></p>

			<p><span style="color:#ffffff">&nbsp; </span><span style="color:#f1c40f">methods</span><span style="color:#ffffff">: {</span></p>

			<p><span style="color:#ffffff">&nbsp; &nbsp; </span><span style="color:#2ecc71">helloAlert</span><span style="color:#ffffff">: function(){</span></p>

			<p><span style="color:#ffffff">&nbsp; &nbsp; &nbsp; alert('Hello!')</span></p>

			<p><span style="color:#ffffff">&nbsp; &nbsp; },</span></p>

			<p><span style="color:#ffffff">&nbsp; },</span></p>

			<p><span style="color:#ffffff">})</span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<thead>
		<tr>
			<th scope="col" style="background-color:#ffffff">html</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff"><div id="app"></span></p>

			<p><span style="color:#ffffff">&nbsp; <button v-on:click="</span><span style="color:#2ecc71">helloAlert</span><span style="color:#ffffff">">Push!</button></span></p>

			<p><span style="color:#ffffff"></div></span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>ボタンを押すとアラートが出現する実装です。</p>