摘要:使用三目運(yùn)算符綁定樣式本來(lái)以為使用模版寫法,在綁定單個(gè)樣式,也就是一個(gè)類名的時(shí)候可以直接書(shū)寫,就像這樣結(jié)果運(yùn)行出來(lái)是錯(cuò)誤的,找了半天原因,才發(fā)現(xiàn)寫法應(yīng)該是下面這種這樣才對(duì)嘛或者這樣也可以這樣最后將綁定表達(dá)式限制為一個(gè)表達(dá)式。
使用三目運(yùn)算符綁定樣式
本來(lái)以為使用vue模版寫法,在綁定單個(gè)樣式,也就是一個(gè)class類名的時(shí)候可以直接書(shū)寫,就像這樣
?
結(jié)果運(yùn)行出來(lái)是錯(cuò)誤的,找了半天原因,才發(fā)現(xiàn)寫法應(yīng)該是下面這種
這樣才對(duì)嘛
或者這樣
也可以這樣
最后
Vue.js 將綁定表達(dá)式限制為一個(gè)表達(dá)式。如果需要多于一個(gè)表達(dá)式的邏輯,應(yīng)當(dāng)使用計(jì)算屬性。也就是computed。
computed和method效果上都是一樣的,但是 computed 是基于vue的依賴緩存,只有相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值。而使用 methods ,在重新渲染的時(shí)候,函數(shù)總會(huì)重新調(diào)用執(zhí)行。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51679.html
摘要:它可以往元素的屬性中綁定數(shù)據(jù),也可以動(dòng)態(tài)地根據(jù)數(shù)據(jù)為元素綁定不同的樣式。綁定屬性最簡(jiǎn)單的例子,我們有一張圖片,需要定義圖片的。注意樣式的寫法跟會(huì)有些許不同,橫杠分詞變成駝峰式分詞。這期就到這里,敬請(qǐng)期待下一期列表渲染和事件監(jiān)聽(tīng)。 這期跟大家分享的,是v-bind指令。它可以往元素的屬性中綁定數(shù)據(jù),也可以動(dòng)態(tài)地根據(jù)數(shù)據(jù)為元素綁定不同的樣式。 綁定屬性 最簡(jiǎn)單的例子,我們有一張圖片,需要定...
摘要:每一個(gè)計(jì)算屬性都包含一個(gè)和一個(gè)。使用計(jì)算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動(dòng)態(tài)更新元素上的屬性。測(cè)試文字當(dāng)?shù)谋磉_(dá)式過(guò)長(zhǎng)或邏輯復(fù)雜時(shí),還可以綁定一個(gè)計(jì)算屬性。 學(xué)習(xí)筆記:前端開(kāi)發(fā)文檔 計(jì)算屬性 所有的計(jì)算屬性都以函數(shù)的形式寫在Vue實(shí)例中的computed選項(xiàng)內(nèi),最終返回計(jì)算后的結(jié)果。 計(jì)算屬性的用法 在一個(gè)計(jì)算屬性中可以完成各種復(fù)雜的邏輯,包括運(yùn)算、函數(shù)調(diào)用等,只要最終...
摘要:學(xué)習(xí)內(nèi)容,基本語(yǔ)法和概念,打包工具,實(shí)戰(zhàn)操作參考文獻(xiàn)官網(wǎng)官方資料庫(kù)全家桶全家桶文檔概念前端框架借助可以實(shí)現(xiàn)手機(jī)開(kāi)發(fā)前端框架是一套構(gòu)造用戶界面的框架,只關(guān)于視圖層前端的主要工作室跟用戶界面打交道,中的,實(shí)現(xiàn)界面效果框架是為了提高開(kāi)發(fā) 學(xué)習(xí)內(nèi)容 1,Vue基本語(yǔ)法和概念 2, 打包工具 Webpack , Gulp3,實(shí)戰(zhàn)操作 參考文獻(xiàn):官網(wǎng): https://cn.vuejs.org...
摘要:學(xué)習(xí)內(nèi)容,基本語(yǔ)法和概念,打包工具,實(shí)戰(zhàn)操作參考文獻(xiàn)官網(wǎng)官方資料庫(kù)全家桶全家桶文檔概念前端框架借助可以實(shí)現(xiàn)手機(jī)開(kāi)發(fā)前端框架是一套構(gòu)造用戶界面的框架,只關(guān)于視圖層前端的主要工作室跟用戶界面打交道,中的,實(shí)現(xiàn)界面效果框架是為了提高開(kāi)發(fā) 學(xué)習(xí)內(nèi)容 1,Vue基本語(yǔ)法和概念 2, 打包工具 Webpack , Gulp3,實(shí)戰(zhàn)操作 參考文獻(xiàn):官網(wǎng): https://cn.vuejs.org...
閱讀 3039·2021-09-22 15:52
閱讀 2912·2019-08-30 15:55
閱讀 2707·2019-08-30 15:53
閱讀 2460·2019-08-30 13:21
閱讀 1627·2019-08-30 13:10
閱讀 2486·2019-08-26 12:09
閱讀 2572·2019-08-26 10:33
閱讀 1809·2019-08-23 18:06