vue はどのようなバインディング データを使用しますか?

Vue バインディング データ メソッド: 1. 二重中括弧 "{{}}" を使用してページにデータを与えます; 2. vue 命令を使用します。v-bind 命令は一方向のデータ バインディングを実現できます。 v -model ディレクティブは双方向のデータ・バインディングを実現できます。 3. 「:」を使用します。バインディングのラベル属性の前に「:」を追加するだけです。 4. 「${}」を使用します。データの前に文字列を結合するだけです。 「$」を使用します。 {}」。

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

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

1. Double を使用します。中かっこ '{{}}' はページにデータを与えます

<template>

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

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

<template>

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

ここでは v-model を使用して入力ボックスの値を msg にバインドします。また、v-text v-html v-bind などにすることもできます。

1. 一方向データ バインディング (v-bind): データはデータからページに戻ることのみ可能です (一方向転送)

2. 双方向データバインディング (v-model): データはデータからページに流れるだけでなく、ページからデータにも流れることができます

(1) 双方向データ バインディングは通常、フォーム要素 (入力選択チェックボックス、 etc.)

( 2) v-model:value は、v-model と省略できます。これは、v-model がデフォルトで値を収集するためです。

3. 追加バインドする label 属性の前に ':' を付けます

<template>

  <div>
    <cellgroup>
      <cell></cell>
    </cellgroup>

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

msg の値をセルのタイトルにバインドします:title を追加するのを忘れた場合は、 title 属性の前に :' を付けるとページの表示が変わります:

title に与えられる値は data() の変数 msg ではなく文字列です"msg"

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

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

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

[関連する推奨事項:

vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

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