vue データバインディングにはどのような方法がありますか?

Vue データ バインディング方法: 1. 二重中括弧 "{{}}" を使用してページにデータを与えます; 2. "v-model"、"v-text"、"v-html" を使用します。 "、"v-bind" およびその他の命令; 3. バインドするラベル属性の前に ":" を追加します; 4. データの前に "${}" を使用して文字列を結合します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

#Vue がデータをバインドするいくつかの方法

1. 二重中括弧を使用します '{<strong>{}}<span style="font-size: 16px;"></span></strong>' データをページに提供します

<template>

  <div class="mainBody">
      <h3>{{ msg }}</h3>
  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
     }
}
}
</script>

2. vue コマンドを使用します

<template>

  <div class="mainBody">
       <Input v-model="msg"/>
  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;
     }
}
}
</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:&#39;月落乌啼霜满天&#39;,
     }
}
}
</script>

msg の値を:title を通じてセルのタイトルにバインドします。「

:##」を追加するのを忘れた場合は、 #' を title 属性の前に追加すると、ページ表示は次のようになります。
title に指定される値は、data() の変数 msg ではなく、文字列 "msg"

4. データの前に文字列を結合するには `${}` を使用します

<template>
<!-- 有时我们需要给要绑定的值拼接字符串，比如需要控制样式，拼接字符串时，那我们就需要这样写`${}`， -->
  <div class="mainBody">
    <CellGroup>
      <Cell :title="msg"/>
       <!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:&#39;aqua&#39; -->
      <Cell title=&#39;江枫渔火对愁眠&#39; :style="`background-color: ${color}`"/>
       <!-- 将‘江枫渔火对愁眠’拼接在msg：&#39;月落乌啼霜满天&#39;后-->
      <Cell :title="`${msg}，江枫渔火对愁眠`" />
    </CellGroup>

  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
       color:&#39;aqua&#39;
     }
}
}
</script>

[関連する推奨事項: "

vue.js チュートリアル

》]

以上がvue データバインディングにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。