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

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

目前創(chuàng)新互聯(lián)建站已為上千多家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)頁空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設計、通化縣網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

一、Mustache插值語法

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

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

??
我們可以寫：

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

 
      {{message}}
      當前計數(shù)：{{counter}}

      
      計數(shù)雙倍：{{counter*2}}
      展示的信息:{{info.split(" ")}}

      
      {{age>=18?"成年人" : "未成年人"}}

      
      {{formatDate(time)}}

二、v-bind的綁定屬性

2.1.v-bind綁定基本屬性

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

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

??v-bind用于

綁定一個或多個屬性值
向另一個組件傳遞props值**(props:相當于一個組件的輸入，后面會學習到的）
?
v-bind:href 可以寫為 :href 這就是v-bind的語法糖

2.2.v-bind綁定class

1、基本綁定class

Hello World

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


我是按鈕

3、對象語法的基本使用

我是按鈕

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

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


我是按鈕

2.3.v-bind綁定style

1、普通的html寫法

hhh

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

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

hhhh

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

hhhhh

2.4.v-bind綁定屬性名

??綁定data中的屬性名

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


      Hello World

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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

一、Mustache插值語法

{{message}}

當前計數(shù)：{{counter}}

計數(shù)雙倍：{{counter*2}}

展示的信息:{{info.split(" ")}}

{{age>=18?"成年人" : "未成年人"}}

{{formatDate(time)}}