[Vue.js]バインドデータ
データのバインド本明細書をハードコーディングし、その後 を変更することは困難である. vueで提供されるリアルタイム自動レンダリング機能を使用 リアルタイムオートレンダリングとは、以下のデータで値を変更したときにhtmlにリアルタイムで反映される動作を指す. Webアプリケーションまたはリアルタイムのデータ変更が頻繁に発生する場所で使用できます.
バインド属性データ
ビューでは、この値だけでなくstyleなどのプロパティもバインドできます.
次の図に示すように、属性値をデータに宣言し、使用する場所に変数名を作成します.
特殊な点は、属性のdata変数が2つのカッコではなくhtmlの属性値の前に
次のコードに示すように、データを配列として宣言し、配列値に基づいてバインドできます.
<script>
export default {
name: 'App',
data(){
return{
// 데이터들 모두 모아두는곳 즉 데이터 보관함
price1 : 60,
price2 : 70,
}
},
components: {
}
}
</script><div>
xx부동산
<h4>xx매물</h4>
<p>{{price1}} 만원</p>
</div>
<div>
xx부동산
<h4>xx매물2</h4>
<p>{{price1}} 만원</p>
</div>バインド属性データ
ビューでは、この値だけでなくstyleなどのプロパティもバインドできます.
次の図に示すように、属性値をデータに宣言し、使用する場所に変数名を作成します.
特殊な点は、属性のdata変数が2つのカッコではなくhtmlの属性値の前に
:を付けることです.次のコードも:styleと宣言されています. <div>
xx부동산
<h4 :style="스타일">xx매물</h4>
<p>{{price1}} 만원</p>
</div>
...
data(){
return{
// 데이터들 모두 모아두는곳 즉 데이터 보관함
price1 : 60,
스타일 : 'color : blue',
}
},次のコードに示すように、データを配列として宣言し、配列値に基づいてバインドできます.
<div>
xx부동산
<h4>{{products[0]}}</h4>
</div>
<div>
<h4>{{products[1]}}</h4>
</div>
<div>
<h4>{{products[2]}}</h4>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
// 데이터들 모두 모아두는곳 즉 데이터 보관함
products : ['역삼동원룸','천호동원룸','마포구원룸'],
}
},
components: {
}
}
</script>Reference
この問題について([Vue.js]バインドデータ), 我々は、より多くの情報をここで見つけました https://velog.io/@alstn_dev/데이터-바인딩テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol