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

更新時(shí)間：2022年10月10日 11:14:24 作者：東非不開森

在Vue中通過Mustache語法（雙大括號）將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache插值語法與v-bind指令的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、Mustache插值語法

mustache 語法：是"胡子"的意思, 據(jù)說是因?yàn)榍度霕?biāo)記像胡子 {{}}(我覺得一點(diǎn)也不像哎O(∩_∩)O哈哈~)

把數(shù)據(jù)顯示到模板（template）中，使用最多的語法是 “Mustache”語法 (雙大括號) 的文本插值

data返回的對象是有添加到Vue的響應(yīng)式系統(tǒng)中；
當(dāng)data中的數(shù)據(jù)發(fā)生改變時(shí)，對應(yīng)的內(nèi)容也會發(fā)生更新。
Mustache中不僅僅可以是data中的屬性，也可以是一個(gè)JavaScript的表達(dá)式

我們可以寫：

值
表達(dá)式
三元表達(dá)式
調(diào)用methods中函數(shù)

 <div id="app">
      <h2>{{message}}</h2>
      <h2>當(dāng)前計(jì)數(shù)：{{counter}}</h2>

      <!-- 2.表達(dá)式 -->
      <h2>計(jì)數(shù)雙倍：{{counter*2}}</h2>
      <h2>展示的信息:{{info.split(" ")}}</h2>

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

      <!-- 4.調(diào)用methods中函數(shù) -->
      <h2>{{formatDate(time)}}</h2>
</div>

二、v-bind的綁定屬性

2.1.v-bind綁定基本屬性

單向綁定v-bind：數(shù)據(jù)只能從data流向頁面

綁定屬性我們可以使用v-bind,比如動態(tài)綁定a元素的href屬性、img元素的src屬性

v-bind用于

綁定一個(gè)或多個(gè)屬性值
向另一個(gè)組件傳遞props值**(props:相當(dāng)于一個(gè)組件的輸入，后面會學(xué)習(xí)到的）

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" rel="external nofollow" >百度一下</a>
    </div>

2.2.v-bind綁定class

基本綁定class

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

動態(tài)class可以寫對象語法

<button :class="isActive ? 'active':''" @click="btnClick">
我是按鈕
</button>

對象語法的基本使用

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

對象語法的多個(gè)鍵值對,動態(tài)綁定的class是可以和普通的class同時(shí)的使用

我們可以給v-bind:class一個(gè)對象，用以動態(tài)的切換class
當(dāng)然，v-bind:class也是可以與普通的class特性共存

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

2.3.v-bind綁定style

普通的html寫法

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

style中的某些值，來自data中

動態(tài)綁定style，在后面跟上對象類型

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

動態(tài)的綁定屬性，這個(gè)屬性是一個(gè)對象

<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直接綁定對象

傳入一個(gè)對象，對象來自于data，一個(gè)對象的所有屬性，綁定到元素上的所有屬性

<div id="app">
      <h2 :name="name" :age="age" :height="height">Hello world</h2>
      <--直接綁定一個(gè)對象，一步到位-->
      <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");