grimm.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<title>グリム童話</title>
</head>
<body>
<h2>グリム童話</h2><p />
<button id='aa' onclick="doAction(this.id)">
赤ずきん
</button>
<button id='bb' onclick="doAction(this.id)">
いばらひめ
</button>
<button id='cc' onclick="doAction(this.id)">
ラプンツェル
</button>
<button id='dd' onclick="doAction(this.id)">
七わのからす
</button>
<div id="app0">
<blockquote>
{{ title }}
</blockquote>
<p />
{{ text }}
</div>
<script src="grimm.js"></script>
<p />
Apr/23/2019 AM 08:25<p />
</body>
</html>
grimm.js
// ---------------------------------------------------------------
// grimm.js
//
// Apr/23/2019
//
// ---------------------------------------------------------------
var data_aa = {title: 'こんにちは。',
text: 'テスト'}
new Vue (
{
el: '#app0',
data: data_aa
})
// ---------------------------------------------------------------
function doAction(id){
switch(id)
{
case 'aa':
title = '赤ずきん'
text = ' むかし、あるところに、ちいさな、かわいい女の子がいました。だれでも、ひと目見ただけで、この子がすきになりましたが、なんといっても一ばんかわいがったのは、この子のおばあさんでした。'
break
case 'bb':
title = 'いばらひめ'
text = ' 昔むかし、王さまとおきさきががおりました。ふたりは毎日、「子どもがほしい！子どもがいればな！」と、言い暮らしていましたが、いつまでたっても、ひとりもさずかりませんでした。'
break
case 'cc':
title = 'ラブンツェル'
text = ' むかし、あるところに、亭主とおかみさんがおりました。長いあいだ、子どもがほしいと願っていましたが、さずかりませんでした。'
break
case 'dd':
title = '七のからす'
text = ' むかし、ある男のひとに、むすこばかり、七人ありました。むすめをほしい、ほしいとねがってきたのですが、ひとりも、さずからなかったのです。'
break
}
data_aa.title = title
data_aa.text = text
}
// ---------------------------------------------------------------
実行結果
次のバージョンで確認しました。
Vue.js v2.6.14