Vue の Mustache 補間構文と v-bind 命令の詳細な説明

この記事では、Vue の Mustache 補間構文と v-bind 命令について紹介します。

1. 口ひげ補間構文

⭐⭐口ひげの構文: 「beard」を意味します。埋め込まれたタグがひげに見えるからだと言われています {{}} (O(∩_∩)O ははは～とは思えませんが)

最も一般的なのはテンプレート内のデータを表示するために使用されます。構文は、「Mustache」構文 (二重中括弧) です。 テキスト補間

• data 返されたオブジェクトは、Vue の応答システムに追加されます。(学習ビデオ)共有: vue ビデオ チュートリアル )
• データ内のデータが変更されると、対応するコンテンツも更新されます。
• Mustache はデータ内の属性であるだけでなく、JavaScript 式にもなりえます。

⭐⭐
次のように記述できます。

• Value
• 式
• 三項式
• メソッドで関数を呼び出す

 <div id="app">
      <h2>{{message}}</h2>
      <h2>当前计数：{{counter}}</h2>

      <!-- 2.表达式 -->
      <h2>计数双倍：{{counter*2}}</h2>
      <h2>展示的信息:{{info.split(" ")}}</h2>

      <!-- 3.三元表达式 -->
      <h2>{{age>=18?"成年人" : "未成年人"}}</h2>

      <!-- 4.调用methods中函数 -->
      <h2>{{formatDate(time)}}</h2>
</div>

2. v-bind バインディング属性

2.1.v-bind バインディングの基本属性

#⭐⭐

一方向バインディング v-bind: data データからページへのみ流れることができます。

v-bind を使用して、a 要素の href 属性と img 要素の src 属性を動的にバインドするなど、属性をバインドできます# v-bind は、

1 つ以上の属性値をバインドするために使用されます。

• props 値を別のコンポーネントに渡します**(props: コンポーネントの入力に相当し、その後にユーザーが続きます)学習します)
• v-bind:href は次のように記述できます: href これは v-bind
  
  

  <div id="app">
        <!-- 1.绑定img的src属性 -->
        <button @click="switchImage">切换图片</button>
        <img v-bind:src="showImgUrl" alt="" />
        <!--语法糖 v-bind: = :  -->
        <!-- 2.绑定a的href属性 -->
        <a v-bind:href="href">百度一下</a>
      </div>

2.2.v-bind バインディング クラスの糖衣構文です

⭐⭐

1. 基本バインディング クラス

<h2 :class="classes">Hello World</h2>

2. 動的クラスはオブジェクト構文を記述できます

<button :class="isActive ? &#39;active&#39;:&#39;&#39;" @click="btnClick">
我是按钮
</button>

3. オブジェクト構文 基本的に # を使用します##

<button :class="{active:isActive}" @click="btnclick">我是按钮</button>

4、オブジェクト構文の複数のキーと値のペア、動的にバインドされたクラスは通常のクラスと同時に使用できます

v-bind を指定できます: クラスはオブジェクトですクラスを動的に切り替えるために使用されます

もちろん、v-bind:class は通常のクラス属性と共存することもできます

• <button class="abc cba" :class="getDynamicClasses" @click="btnClick">
  我是按钮
  </button>

• 2.3.v-bind binding スタイルの定義

⭐⭐

1. 通常の HTML 記述方法

<h2 style="color: aqua; font-size: 30px">hhh</h2>

2. スタイルの一部の値はデータから取得されます

動的バインディング スタイルの後に続きます。オブジェクトタイプ

<h2 v-bind:style="{color:fontColor,fontSize:fontSize}">hhhh</h2>

3。動的バインディング属性、この属性はオブジェクトです

<h2 :style="objStyle">hhhhh</h2>

2.4.v-bindバインディング属性名

⭐⭐データ内の属性名をバインドします##属性名が固定されていない場合に使用します: [属性名] = "値"

<div id="app">
      <h2 :[name]="aaaa">Hello World</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            name: "class",
          };
        },
      });
      app.mount("#app");

2.5.v-bind はオブジェクトを直接バインドします

⭐⭐オブジェクトを入力します。オブジェクトはデータから取得され、オブジェクトのすべての属性が要素のすべての属性にバインドされます。

<div id="app">
      <h2 :name="name" :age="age" :height="height">Hello world</h2>
      <--直接绑定一个对象，一步到位-->
      <h2 v-bind="infos"></h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            infos: { name: "kk", age: 18, height: 1.7 },
            name: "kk",
            age: 18,
            height: 1.7,
          };
        },
      });
      app.mount("#app");

[関連ビデオ チュートリアルの推奨事項:

vuejs エントリチュートリアル

、

Web フロントエンド エントリ

]

以上がVue の Mustache 補間構文と v-bind 命令の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。