首頁 > web前端 > Vue.js > 詳解Vue中的Mustache內插語法、v-bind指令

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

青灯夜游
發布: 2022-10-24 20:22:25
轉載
1680 人瀏覽過

這篇文章跟大家介紹一下Vue中的Mustache插值語法、v-bind指令,希望能夠幫助大家!

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

一、Mustache插值語法

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

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

  • data傳回的物件是有加入Vue的響應式系統中;(學習影片分享: 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 ? &#39;active&#39;:&#39;&#39;" @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寫法

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");
登入後複製
###【相關影片教學推薦:###vuejs入門教學###、###web前端入門###】###

以上是詳解Vue中的Mustache內插語法、v-bind指令的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板