Vue ディレクティブ

一覧

ディレクティブ	機能	結果	備考
v-text	dataプロパティ等を出力	Hello Vue.js	{{ 〜 }}と同じ
v-pre	vue変数を無視	{{ message }}
v-html	htmlをエスケープせず出力	Hello Vue.js
v-model	inputにバインド	v-model参照
v-on	イベントにメソッドを関連付ける	methods参照	省略記法@
v-bind	html属性を変更する	v-bind参照	省略記法:
v-show	要素の表示/非表示を切り替える	v-show参照
v-if	要素の出力する/しないを切り替える	v-if参照
v-for	配列を操作	v-for参照
v-slot	子componentのスロットにデータを埋め込む	Vueコンポーネント参照

v-model

text

※index.html
<div id="app">
　value属性にバインディングされる
　<input type="text" v-model="message">
</div>
<script src="js/app.js"></script>

※js/app.js
Vue.createApp({
　data: function() {
　　return {
　　　check: [
　　　　message: ‘vue test’,
　　　]
　　};
　}
}).mount('#app');

radio

※index.html
<div id="app">
　<input type="radio" id="radio1" v-model="radio" value="radio1">
　<input type="radio" id="radio2" v-model="radio" value="radio2">
</div>

※js/app.js
Vue.createApp({
　data: function() {
　　return {
　　　value値を設定するとcheckedになる
　　　radio: "radio1",
　　};
　}
}).mount('#app');

checkbox

※index.html
<div id="app">
　<input type="checkbox" id="check1" v-model="checks" value="check1">
　<input type="checkbox" id="check2" v-model="checks" value="check2">
</div>

※js/app.js
Vue.createApp({
　data: function() {
　　return {
　　　check: [
　　　　value値を設定するとcheckedになる
　　　　"check1",
　　　　"check2",
　　　]
　　};
　}
}).mount('#app');

select

※index.html
<div id="app">
　<select v-model="select">
　　<option value="select1">select1</option>
　　<option value="select2">select2</option>
　　<option value="select3">select3</option>
　</select>
</div>

※js/app.js
Vue.createApp({
　data: function() {
　　return {
　　　value値を設定するとselectedになる
　　　select: 'select1',
　　};
　}
}).mount('#app');

v-bind

属性に単一値をbindする場合

<template>
　<div id="app">
　　<button type="button" v-on:click="onClick">onClick</button>
　　<div>
　　　src属性とdataプロパティ：dataSrcをbind
　　　<img v-bind:src="dataSrc" alt="">
　　</div>
　</div>
</template>

<script>
export default {
　data: function() {
　　return {
　　　dataSrc: '',
　　}
　},
　methods: {
　　onClick: function(){
　　　this.dataSrc = 'img/logo.82b9c7a5.png'
　　}
　}
}
</script>

class属性に配列をbindする場合

<template>
　<div id="app">
　　<div
　　　classと配列をbindする
　　　v-bind:class="[
　　　　dataClassName, dataプロパティ：dataClassName
　　　　'selected', 文字列
　　　　computedClassName, computedプロパティ：computedClassName
　　　　methodClassName() methodsプロパティ：methodClassName
　　　]">
　　</div>
　</div>
</template>

<script>
export default {
　data: function() {
　　return {
　　　dataClassName: 'data-class-name',
　　}
　},
　computed: {
　　computedClassName: function(){
　　　return 'computed-class-name';
　　}
　},
　methods: {
　　methodClassName: function(){
　　　return 'methods-class-name'
　　}
　}
}
</script>

結果
<div class="data-class-name selected computed-class-name methods-class-name"></div>

属性にJSオブジェクトをbindする場合

<template>
　<div id="app">
　　<div
　　　{出力する値: プロパティ値}で指定
　　　v-bind:class="{'aaa': isActive}">
　　</div>
　</div>
</template>

<script>
export default {
　data: function() {
　　return {
　　　isActive: true/false,
　　}
　},
}
</script>

結果：isActive=trueの場合
<div class="aaa"></div>

結果：isActive=falseの場合
<div class=""></div>

v-show

<template>
　<div id="app">
　　<div v-show="isShow"aaa</div>
　</div>
</template>

<script>
export default {
　data: function() {
　　return {
　　　isShow: true/false,
　　}
　},
}
</script>

結果：isShow=trueの場合
<div>aaa</div>

結果：isShow=falseの場合
<div style="display: none;">aaa</div>

v-if

<template>
　<div id="app">
　　<div v-if="isIf"aaa</div>
　　<div v-else="〜"bbb</div>
　</div>
</template>

<script>
export default {
　data: function() {
　　return {
　　　isIf: true/false,
　　}
　},
}
</script>

結果：isIf=trueの場合
<div>aaa</div>

結果：isIf=falseの場合
出力されない

v-for

<template>
　<div id="app">
　　<div v-for="(value, key) in items" :key="key" >{{ value }}</div>
　</div>
</template>

<script>
export default {
　data: function() {
　　return {
　　　配列の場合
　　　items: [1,2,3],

　　　JSオブジェクトの場合　　
　　　items: {
　　　　'key1': 'value1',
　　　　'key2': 'value2',
　　　　'key3': 'value3',
　　　},
　　}
　},
}
</script>

結果：配列
<div>1</div>
<div>2</div>
<div>3</div>

結果：JSオブジェクト
<div>value1</div>
<div>value2</div>
<div>value3</div>