Vue模板語法

2021-09-25 18:57:52 字數 1234 閱讀 8713

**

插值v-html指令

我們可以在js裡自定義html**

屬性v-bind(簡寫:)

我們可以可以指定標籤的一些屬性給它們賦值,還有v-model也是賦值,但是它會影響整個所有它定義的那個資料,而不只是乙個

v-bind:與v-model的區別

v-model是做資料雙向繫結的指令

v-bind只是將對應的值給填寫到指定屬性中

例如:v-bind:value簡單來說就是將值填寫到value=""

然後value的值發生改變,並不會影響vue例項中的變數值

表示式可以擷取我們想要的內容,動態生成id

demo

}} }

}我的id是js動態生成的

指令

條件指令(if elseif else)

可以對資料進行判斷,然後分別執行相應的操作

v-show

可以監聽文字框內容,當文字框插入文字時執行相對應操作

v-for

定義陣列,可以對陣列進行遍歷,並可以獲取其他的每個屬性和下標

動態引數

可以根據我們輸入的內容改變按鈕所執行的事件

demo

}90">a

80">b

70">c

60">d

e 出現吧

},}},}

點我

過濾器

區域性過濾器

和表示式有點像,可以擷取一段我們想要的文字返回,可以自定義它出現的文字,是擷取後的還是擷取前的

區域性過濾器可串聯

在過濾完乙個條件後還可以繼續再過濾乙個條件

全域性過濾器

過濾完的內容不僅在乙個頁面可用,其他頁面也可以用,需要配置檔案,這裡就不演示效果了

demo

}} }}

}}

計算屬性和監聽屬性

計算屬性

可以對兩個文字框的內容繼續加減乘除,可以即時得到結果

監聽屬性

可以給兩個文字框加監聽,乙個文字框內容變了,另乙個也會變

計算屬性和監聽屬性聯合用可以用來計算購物車總價即時重新整理

demo

數量:單價:計算總價:}km:m:

VUE 模板語法

message span 雙大括號裡面的內容會被替換成msg的變數值,在msg變數值改變的時候會自動更新html裡的內容 只輸出純文字文字,不會有html效果,為了輸出html需要用到v html指令 using mustaches p using v html directive v html r...

Vue模板語法

vue.js使用基於html的模板語法,允許開發者宣告式地將dom繫結到底層vue例項。所有vue.js的模板都是合法的html,所以能被遵循規範的瀏覽器和html解析器解析。在底層的實現上,vue將模板編譯成虛擬dom渲染函式。結合響應系統,在應用狀態改變時,vue能智慧型地計算出重新渲染元件的最...

vue 模板語法

lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head class1 style src libs vue.js script class 雙大括號 的文字...