v-bind
v-bindは、テンプレートに属性やスタイルを埋め込む(バインド)ための手法になります。
:href
画面遷移に関するディレクティブ属性
[ HTML ] =============================
<要素名 v-bind:href=”データプロパティ名”>
<要素名 :href=”データプロパティ名”>※省略時
[ Vue.js ] =============================
data() {
return {
データプロパティ名 : “リンク先”;
};
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bindについて</title>
</head>
<body>
<div id="app">
<a :href="url">Google</a>
</div>
<script src="./js/href.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
url: "https://www.google.com",
};
},
}).mount("#app");ダメな例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind(ダメな例)について</title>
</head>
<body>
<div id="app">
<p>ダメな例</p>
<a href="{{ url }}">Google</a>
</div>
<script src="./js/href.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
url: "https://www.google.com",
};
},
}).mount("#app");ダメな例
Google{{ url }}が全て文字列変換され正式なURLのリンクにならない
:src
画像表示に関するディレクティブ属性
[ HTML ] =============================
<要素名 v-bind:src=”データプロパティ名”>
<要素名 :src=”データプロパティ名”>※省略時
[ Vue.js ] =============================
data() {
return {
データプロパティ名 : “画像のURL”;
};
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind:srcについて</title>
</head>
<body>
<div id="app">
<img :src="imageSrc" />
</div>
<script src="./js/src.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
imageSrc: "画像のURL",
};
},
}).mount("#app");:type
inputの種類に関するディレクティブ属性
[ HTML ] =============================
<要素名 v-bind:type=”データプロパティ名”>
<要素名 :type=”データプロパティ名”>※省略時
[ Vue.js ] =============================
data() {
return {
データプロパティ名 : “inputタイプ属性”;
};
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind:typeについて</title>
</head>
<body>
<div id="app">
<div>
<label for="type1">チェックボックス : </label>
<input id="type1" :type="inputType1" />
</div>
<div>
<label for="male">男性</label>
<input id="male" name="gender" :type="inputType2" />
<label for="female">女性</label>
<input id="female" name="gender" :type="inputType2" />
<label for="other">その他</label>
<input id="other" name="gender" :type="inputType2" />
</div>
<div>
<label for="type3">カレンダー : </label>
<input id="type3" :type="inputType3" />
</div>
<div>
<label for="type4">テキスト : </label>
<input id="type4" :type="inputType4" />
</div>
</div>
<script src="./js/type.js"></script>
</body>
</html>Vue.createApp({
data() {
return {
inputType1: "checkbox",
inputType2: "radio",
inputType3: "date",
inputType4: "text",
};
},
}).mount("#app");:value
input選択時の値に関するディレクティブ属性
[ HTML ] =============================
<要素名 v-bind:value=”データプロパティ名”>
<要素名 :value=”データプロパティ名”>※省略時
[ Vue.js ] =============================
data() {
return {
データプロパティ名 : “inputの値”;
};
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind:valueについて</title>
</head>
<body>
<div id="app">
<select v-model="selected">
<option>-</option>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<div>{{ selected }}</div>
</div>
<script src="./js/value.js"></script>
</body>
</html>Vue.createApp({
data() {
return {
selected: "-",
options: [
{ text: "One", value: "A" },
{ text: "Two", value: "B" },
{ text: "Three", value: "C" },
],
};
},
}).mount("#app");