ホームページ > 記事 > ウェブフロントエンド > vue データバインディングにはどのような方法がありますか?
Vue データ バインディング方法: 1. 二重中括弧 "{{}}" を使用してページにデータを与えます; 2. "v-model"、"v-text"、"v-html" を使用します。 "、"v-bind" およびその他の命令; 3. バインドするラベル属性の前に ":" を追加します; 4. データの前に "${}" を使用して文字列を結合します。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
1. 二重中括弧を使用します '{<strong>{}}<span style="font-size: 16px;"></span></strong>
' データをページに提供します
<template> <div class="mainBody"> <h3>{{ msg }}</h3> </div> </template> <script> export default { data(){ return{ msg:'月落乌啼霜满天', } } } </script>
2. vue コマンドを使用します
<template> <div class="mainBody"> <Input v-model="msg"/> </div> </template> <script> export default { data(){ return{ msg:'月落乌啼霜满天' } } } </script>ここでは、入力ボックスの値をバインドするために v モデルが使用されていますto msg v-text v-html v-bind などにすることもできます。
#3. label 属性の前に「:」を追加します。 bind
<template> <div class="mainBody"> <CellGroup> <Cell :title="msg"/> </CellGroup> </div> </template> <script> export default { data(){ return{ msg:'月落乌啼霜满天', } } } </script>msg の値を:title を通じてセルのタイトルにバインドします。「
:##」を追加するのを忘れた場合は、 #' を title 属性の前に追加すると、ページ表示は次のようになります。
title に指定される値は、data() の変数 msg ではなく、文字列 "msg"
4. データの前に文字列を結合するには `${}` を使用します <template>
<!-- 有时我们需要给要绑定的值拼接字符串,比如需要控制样式,拼接字符串时,那我们就需要这样写`${}`, -->
<div class="mainBody">
<CellGroup>
<Cell :title="msg"/>
<!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:'aqua' -->
<Cell title='江枫渔火对愁眠' :style="`background-color: ${color}`"/>
<!-- 将‘江枫渔火对愁眠’拼接在msg:'月落乌啼霜满天'后-->
<Cell :title="`${msg},江枫渔火对愁眠`" />
</CellGroup>
</div>
</template>
<script>
export default {
data(){
return{
msg:'月落乌啼霜满天',
color:'aqua'
}
}
}
</script>
[関連する推奨事項: "
vue.js チュートリアル以上がvue データバインディングにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。