詳解Vue中的Mustache插值語法、v-bind指令

本篇文章給大家介紹一下中的Mustache插值語法、v-bind指令，希望能夠給大家提供幫助！

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

一、Mustache插值語法

⭐⭐mustache 語法：是"鬍子"的意思, 據說是因為嵌入標記像鬍子 {{}}(我覺得一點也不像哎O(∩_∩)O哈哈~)

把資料顯示到模板（template）中，使用最多的語法是「Mustache」語法 (雙大括號) 的文字插值

data返回的物件是有新增到Vue的響應式系統中；（學習視訊分享：）
當data中的資料發生改變時，對應的內容也會發生更新。
Mustache中不僅僅可以是data中的屬性，也可以是一個JavaScript的表示式

⭐⭐
我們可以寫：

值
表示式
三元表示式
呼叫methods中函數

 <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>
登入後複製

二、v-bind的繫結屬性

2.1.v-bind繫結基本屬性

⭐⭐
單向繫結v-bind：資料只能從data流向頁面

繫結屬性我們可以使用v-bind,比如動態繫結a元素的href屬性、img元素的src屬性

v-bind用於

繫結一個或多個屬性值
向另一個元件傳遞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繫結class

⭐⭐

1、基本系結class

<h2 :class="classes">Hello World</h2>
登入後複製

2、動態class可以寫物件語法

<button :class="isActive ? 'active':''" @click="btnClick">
我是按鈕
</button>
登入後複製

3、物件語法的基本使用

<button :class="{active:isActive}" @click="btnclick">我是按鈕</button>
登入後複製

4、物件語法的多個鍵值對,動態繫結的class是可以和普通的class同時的使用

我們可以給v-bind:class一個物件，用以動態的切換class
當然，v-bind:class也是可以與普通的class特性共存

<button class="abc cba" :class="getDynamicClasses" @click="btnClick">
我是按鈕
</button>
登入後複製

2.3.v-bind繫結style

⭐⭐

1、普通的html寫法

<h2 style="color: aqua; font-size: 30px">hhh</h2>
登入後複製

2、style中的某些值，來自data中

動態繫結style，在後面跟上物件型別

<h2 v-bind:style="{color:fontColor,fontSize:fontSize}">hhhh</h2>
登入後複製

3、動態的繫結屬性，這個屬性是一個物件

<h2 :style="objStyle">hhhhh</h2>
登入後複製

2.4.v-bind繫結屬性名

⭐⭐繫結data中的屬性名

在屬性名不是固定的情況下使用:[屬性名]=「值」

<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直接繫結物件

⭐⭐傳入一個物件，物件來自於data，一個物件的所有屬性，繫結到元素上的所有屬性

<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");
登入後複製

【相關視訊教學推薦：、】

以上就是詳解Vue中的Mustache插值語法、v-bind指令的詳細內容，更多請關注TW511.COM其它相關文章！