vue.jsビューアドバイザ
🌱 ビューアドバイザ(Directive)
しゅめいれいセット
v-if:(条件文)指定したビューデータ値の真または偽に基づいて画面に表示されます.
(偽りの時は見えない=ラベルそのものが見えない.)
v-for:(繰り返し文)指定したビューデータの数に応じてhtmlタグを繰り返し出力します.v-if、els-if、elseなどと一緒に使用できません.使うなら親につり革をつける.
v-show:v-ifと同様に、データの真実性に応じてhtmlタグを表示または表示しません.
(css効果でのみ表示:none;画面では表示されませんが、タグは保持されます)
v-bind:ビューインスタンスのデータ属性をHTML要素に関連付ける(一方向)
v-on:HTML要素のイベントをビューインスタンスの論理に関連付ける
(関数接続時のみex@clickを使用)
v-model:v-bindとv-onの組み合わせ.フォームでよく使用されるプロパティ.フォームに入力した値を、ビューインスタンスのデータとすぐに同期します.入力した値をサーバに保存して送信するか、watchなどの高度なプロパティを使用して他の論理を実行できます.(双方向)
=
input
、select
、およびtextarea
タグでのみ使用可能v-bind:aaa = :aaa
v-on:click = @click
👉 v-bindは、上の2つのv-onのみを,@と略すことができます.残ったのはNoNoNo!!
ex)
...
<div id='test'>
<template v-if='number===1'>
<div>1</div>
<div>2</div>
<div>3</div>
</template>
<div v-else-if='number===2'>hellow</div>
<div v-else>no!!!</div>
<button @click='increaseNumber'>버튼</button>
<br/>
<a v-if='flag'> 할 수 있다 !! </a>
<ul>
<li v-for='person in people'> {{ person }} </li>
</ul>
<h5 v-bind:id='uid'>뷰 입문서</h5>
<button @click='onClickBtn'>경고창 버튼</button>
</div>
...
<script>
new Vue({
el: '#test',
data : {
flag: true,
people: ['호두', '자두', '찐빵', '웬즈', '뚱이'],
uid: 10,
methods: {
onClickBtn : function(){
return alert('경고!!경고입니다!!')
}
}
}
});
</script>
Reference
この問題について(vue.jsビューアドバイザ), 我々は、より多くの情報をここで見つけました https://velog.io/@park0eun/vue.js뷰-디렉티브テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol