vueでよく使われるv命令

vueでよく使われるv命令のデモ

共通命令

v-textダブルラベル要素のinnerText

を設定

v-html二重タグ要素を設定するinnerHTML

v-if要素の挿入または除去(true,挿入,false除去)

v-else上の兄弟ノードにv-if|v-else-ifが存在することを保証

v-if v-elseはその1つしか存在しない

v-show非表示または表示要素

v-model双方向データバインド

要素にはvalue値が必要です.DOM要素のvalueはjsメモリ変数の属性とバインドされます.

classはv-bindと組み合わせて使用する

で変化する属性は、v-bindの変化を付与する値

であってもよい.

v-bind:属性名="式|"オブジェクト"

略記:属性名="式|"オブジェクト"

スタイルの三元表現

を設定します.

複数のスタイルオブジェクトの形式を設定する

オブジェクト{スタイル名:boolを使用するかどうか、スタイル名:使用するかどうか}

methodsとv-onの使用

options:

methodsはオブジェクトであり、keyは関数名であり、valueは関数体

である.

v-on:DOMオリジナルイベント="式||関数"

呼び出し関数にパラメータがない場合、()は

を省略することができる.

略記:@イベント名="式||関数"

v-forの使用

v-for=“xxxx in items” :key=“index”

まとめ

配列v-for="(ele,index)in dataArr):key="index"

オブジェクトv-for="(value,key,index)in dataObj":key="index"

	
	
	


	

		
 {{msg}} 
		
		
 {{msg}} 
		    
		

		

		

			

		
	
	
	
		let vm = new Vue({
			el:'.app',
			data:{
				msg:'<h1>hello world</h1>',
				isTrue:false,
				arr:['a','b','c','d']
			},
			methods:{
				change(){
					this.isTrue = !this.isTrue;
				}
			}
		})