Vue中的Mustache插值語法、v-bind指令怎么使用

本篇內容介紹了“Vue中的Mustache插值語法、v-bind指令怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、Mustache插值語法

??mustache 語法： 是"胡子"的意思, 據說是因為嵌入標記像胡子 {{}}(我覺得一點也不像哎O(∩_∩)O哈哈~)
?
把數據顯示到模板（template）中，使用最多的語法是 “Mustache”語法 (雙大括號) 的文本插值

• data返回的對象是有添加到Vue的響應式系統中。

• 當data中的數據發生改變時，對應的內容也會發生更新。

• Mustache中不僅僅可以是data中的屬性，也可以是一個JavaScript的表達式。

??
我們可以寫：

• 值

• 表達式

• 三元表達式

• 調用methods中函數

 <div id="app">
      <h3>{{message}}</h3>
      <h3>當前計數：{{counter}}</h3>

      <!-- 2.表達式 -->
      <h3>計數雙倍：{{counter*2}}</h3>
      <h3>展示的信息:{{info.split(" ")}}</h3>

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

      <!-- 4.調用methods中函數 -->
      <h3>{{formatDate(time)}}</h3>
</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

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

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寫法

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

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

動態綁定style，在后面跟上對象類型

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

3、動態的綁定屬性，這個屬性是一個對象

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

2.4.v-bind綁定屬性名

??綁定data中的屬性名

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

<div id="app">
      <h3 :[name]="aaaa">Hello World</h3>
    </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">
      <h3 :name="name" :age="age" :height="height">Hello world</h3>
      <--直接綁定一個對象，一步到位-->
      <h3 v-bind="infos"></h3>
    </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指令怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！