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

ホームページ

ウェブフロントエンド

Vue.js

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

青灯夜游

Oct 24, 2022 pm 08:22 PM

vuevue3

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

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

1. 口ひげ補間構文

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

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

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

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

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

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

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

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

      <!-- 4.调用methods中函数 -->
      <h2 id="formatDate-time">{{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 src="/static/imghwm/default1.png"  data-src="showImgUrl"  class="lazy"  v-bind: alt="" />
      <!--语法糖 v-bind: = :  -->
      <!-- 2.绑定a的href属性 -->
      <a v-bind:href="href">百度一下</a>
    </div>

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

⭐⭐

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

<h2 id="Hello-nbsp-World">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 を指定できます: クラスはオブジェクトですクラスを動的に切り替えるために使用されます

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

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

⭐⭐

1. 通常の HTML 記述方法

<h2 id="hhh">hhh</h2>

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

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

<h2 id="hhhh">hhhh</h2>

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

<h2 id="hhhhh">hhhhh</h2>

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

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


      <h2 id="Hello-nbsp-World">Hello World</h2>
    
    
    ホットAIツール
Undresser.AI Undressリアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover写真から衣服を削除するオンライン AI ツール。
Undress AI Tool脱衣画像を無料で
Clothoff.ioAI衣類リムーバー
AI Hentai GeneratorAIヘンタイを無料で生成します。
もっと見る
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）3週間前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定3週間前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション2週間前ByDDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法3週間前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法3週間前By尊渡假赌尊渡假赌尊渡假赌
もっと見る
ホットツール
mPDFmPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SublimeText3 Linux 新バージョンSublimeText3 Linux 最新バージョン
Dreamweaver Mac版ビジュアル Web 開発ツール
SublimeText3 英語版推奨: Win バージョン、コードプロンプトをサポート!
DVWADamn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
もっと見る
ホットトピック
Gmailメールのログイン入り口はどこですか？7456
15
CakePHP チュートリアル1375
52
Steamのアカウント名の形式は何ですか77
11
Win11 Activation Key Permanent40
19
NYTの接続はヒントと回答です14
9
もっと見る