這篇文章跟大家介紹一下Vue中的Mustache插值語法、v-bind指令，希望能夠幫助大家！
一、Mustache插值語法
⭐⭐mustache 語法： 是"鬍子"的意思,據說是因為嵌入標記像鬍子{{}}(我覺得一點也不像哎O(∩_∩)O哈哈~)
把資料顯示到模板（template）中，使用最多的語法是「Mustache」語法(雙大括號) 的文字插值
- data傳回的物件是有加入Vue的響應式系統中；（學習影片分享： vue影片教學）
- 當data中的資料改變時，對應的內容也會發生更新。
- Mustache中不只可以是data中的屬性，也可以是一個JavaScript的表達式
⭐⭐
我們可以寫：
#值表達式
三元表達式
- 呼叫methods中函數
<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>-
二、v-bind的綁定屬性
2.1.v-bind綁定基本屬性
⭐⭐單向綁定v-bind：數據只能從data流向頁面
綁定屬性我們可以使用v-bind
,例如動態綁定a元素的href屬性、img元素的src屬性
v-bind用於
- 綁定一個或多個屬性值
- 向另一個元件傳遞props值**(props:相當於一個元件的輸入，後面會學習到的）
<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綁定class
⭐⭐
1、基本綁定class
<h2 id="Hello-nbsp-World">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 id="hhh">hhh</h2>
2、style中的某些值，來自data中
<h2 id="hhhh">hhhh</h2>###3、動態的綁定屬性，這個屬性是一個物件###
<h2 id="hhhhh">hhhhh</h2>######2.4.v-bind綁定屬性名#########⭐⭐綁定data中的屬性名稱######在屬性名稱不是固定的情況下使用:[屬性名稱]=「值」###
<h2 id="Hello-nbsp-World">Hello World</h2>熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）1 個月前By尊渡假赌尊渡假赌尊渡假赌R.E.P.O.最佳圖形設置1 個月前By尊渡假赌尊渡假赌尊渡假赌刺客信條陰影：貝殼謎語解決方案3 週前ByDDDWindows 11 KB5054979中的新功能以及如何解決更新問題2 週前ByDDD威爾R.E.P.O.有交叉遊戲嗎？1 個月前By尊渡假赌尊渡假赌尊渡假赌熱工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
SublimeText3漢化版
中文版，非常好用
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
