<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue.jsの練習</title>
</head>
<body>
<div id="app">
普通のoptionボタンを用意。v-modelというディレクティブを設定
<select v-model="selected">
<option disabled value="">選択してください</option>
<option>Hello</option>
<option>Good afternoon</option>
<option>Good Night</option>
</select>
<div>
<span>英語：</span>
<span>{{ selected }}</span>
</div>
//spanタグの中に切り替えるHTMLを設定。v-ifなどのディレクティブでif文設定ができる。
<div>
<span>日本語：</span>
<span v-if="selected === 'Hello'">おはよう</span>
<span v-else-if="selected === 'Good afternoon'">こんにちは</span>
<span v-else-if="selected === 'Good Night'">こんばんは</span>
<span v-else>英語の挨拶を選択してください</span>
</div>
</div>
//Vue.jsをCDNで読み込み
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el:'#app',
data:{
htmlの{{ selected }}へ表示する部分。初期値は空欄なので「''」としている。v-ifのディレクティブと繋がっている。
selected:''
}
});
</script>
</body>
</html>
