摘要:與綁定數據綁定一個常見需求是操作元素的列表和它的內聯樣式。兩者只能選其一對象語法我們可以傳給一個對象,以動態地切換。注意不支持語法。相比之下,簡單得多元素始終被編譯并保留,只是簡單地基于切換。這意味著將分別重復運行于每個循環中。
vue Class 與 Style 綁定
綁定 HTML Class
對象語法
如下 data:
data: { isActive: true, hasError: false }
渲染為:
data: { classObject: { active: true, "text-danger": false } }
data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, "text-danger": this.error && this.error.type === "fatal", } } }
數組語法
data: { activeClass: "active", errorClass: "text-danger" }渲染為:如果你也想根據條件切換列表中的 class ,可以用三元表達式:
此例始終添加 errorClass ,但是只有在 isActive 是 true 時添加 activeClass 。
不過,當有多個條件 class 時這樣寫有些繁瑣??梢栽跀到M語法中使用對象語法:
用在組件上
當你在一個定制的組件上用到 class 屬性的時候,這些類將被添加到根元素上面,這個元素上已經存在的類不會被覆蓋。
例如,如果你聲明了這個組件:
Vue.component("my-component", { template: "" })然后在使用它的時候添加一些 class:
HTML 最終將被渲染成為:
同樣的適用于綁定 HTML class :
當 isActive 為 true 的時候,HTML 將被渲染成為:
綁定內聯樣式
對象語法v-bind:style 的對象語法十分直觀——看著非常像 CSS ,其實它是一個 JavaScript 對象。 CSS 屬性名可以用駝峰式(camelCase)或短橫分隔命名(kebab-case):
data: { activeColor: "red", fontSize: 30 }直接綁定到一個樣式對象通常更好,讓模板更清晰
data: { styleObject: { color: "red", fontSize: "13px" } }同樣的,對象語法常常結合返回對象的計算屬性使用。
數組語法v-bind:style 的數組語法可以將多個樣式對象應用到一個元素上:
自動添加前綴當 v-bind:style 使用需要特定前綴的 CSS 屬性時,如 transform,Vue.js 會自動偵測并添加相應的前綴。
條件渲染
v-ifv - if (插入 刪除節點)
優秀
及格
不及格
hellowroldnice to meet youif...else結構if...else if...else結構,if-else用嵌入的方式放進去優秀
不及格
優秀
及格
不及格
v-else 元素必須立即跟在 v-if 或 v-show 元素的后面——否則它不能被識別。
template v-if如果想切換多個元素,可以把一個元素當作包裝元素,并在上面使用v-if,最終的渲染結果不會包含它。
用key管理可復用的元素 Vue 會盡可能高效地渲染元素,通常會復用已有元素而不是從頭開始渲染。這么做,除了使 Vue 變得非??熘?,還有一些有用的好處。例如,如果你允許用戶在不同的登錄方式之間切換: 這樣也不總是符合實際需求,所以 Vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的 key 屬性即可:hellowroldnice to meet you在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。因為兩個模版使用了相同的元素, 不會被替換掉——僅僅是替換了它的的 placeholder Vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的 key 屬性即可:現在,每次切換時,輸入框都將被重新渲染注意: 元素仍然會被高效地復用,因為它們沒有添加 key 屬性v-show 另一個用于根據條件展示元素的選項是 v-show 指令。用法大致一樣: 不同的是有 v-show 的元素會始終渲染并保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display。注意 v-show 不支持 語法。不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display v-if 也是惰性的:如果在初始渲染時條件為假,則什么也不做——在條件第一次變為真時才開始局部編譯(編譯會被緩存起來)。相比之下,v-show 簡單得多——元素始終被編譯并保留,只是簡單地基于 CSS 切換。 一般來說,v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此,如果需要頻繁切換 v-show 較好,如果在運行時條件不大可能改變 v-if 較好。Hello!
v-if 和 v-for 一起使用 當 v-if 與 v-for 一起使用時,v-for 具有比 v-if 更高的優先級。這意味著 v-if 將分別重復運行于每個 v-for 循環中。當你想為僅有的 一些 項渲染節點時,這種優先級的機制會十分有用注意: v-show 不支持 語法,也不支持 v-else
- {{item.text}}
var vm=new Vue({ data:{ items:[ {text:"chifan",isOk:true}, {text:"shuijue",isOk:false}, {text:"kandianshi",isOk:true}, {text:"dayouxi",isOk:true}, {text:"kandianying",isOk:false}, ] } });如果你的目的是有條件地跳過循環的執行,那么可以將 v-if 置于外層元素 (或 )上。列表渲染
v-for可以使用 v-for 指令基于一個數組渲染一個列表。這個指令使用特殊的語法,形式為 item in items,items 是數據數組,item 是當前數組元素的別名:
示例 --- 直接上代碼:
- {{ item.message }}
var example1 = new Vue({ el: "#example-1", data: { items: [ { message: "Foo" }, { message: "Bar" } ] } });結果:
{% raw %} {{item.message}} {% endraw %}在 v-for 塊內我們能完全訪問父組件作用域內的屬性,另有一個特殊變量 $index,正如你猜到的,它是當前數組元素的索引:
- {{ parentMessage }} - {{ $index }} - {{ item.message }}
var example2 = new Vue({ el: "#example-2", data: { parentMessage: "Parent", items: [ { message: "Foo" }, { message: "Bar" } ] } })結果:
{% raw%} {{ parentMessage }} - {{ $index }} - {{ item.message }} {% endraw %}另外,你可以為索引指定一個別名(如果 v-for 用于一個對象,則可以為對象的鍵指定一個別名):
v-for把對象屬性渲染列表{{ index }} {{ item.message }}{{value}}也可以提供第二個的參數為鍵名:{{key}} is {{value}}第三個參數為索引:{{index}}{{key}} is {{value}}數組的更新檢測
變異方法(修改了原始數組):vue.js包裝了被觀察數組的變異方法,故它們能出發視圖更新,即當利用這些方法變更數組時,被渲染的內容會實時更新,被包裝的方法有:
push() 數組末尾添加
pop() 數組末尾取出
shift() 數組開頭取出
unshift() 數組開頭添加
splice() 刪除并插入
sort() 排序
reverse() 數組順序顛倒
- {{item}}
替換數組(返回一個新數組): 數組從一個數組變為另一個數組時(記得,數組是按引用傳遞的),數據綁定依然生效;但前提是使用以下方法:對象更新檢測 ( 待更新……………… )filter() 過濾,參數是一個函數,取其返回值為true的元素被添加到新數組
concat() 合并兩個數組,返回的數組是合并后的
slice() 返回數組的拷貝,從開始索引到結束索引(前含后不含)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85149.html
相關文章
(原創)vue 學習筆記
摘要:菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數,可以通過來返回函數值。它們都有前綴,以便與用戶定義的屬性區分開來。 開篇語 我最近學習了js,取得進步,現在學習vue.js.建議新手學習,請不要用npm的方式(vue-cli,vue腳手架),太復雜了. 請直接下載vue.js文件本地引入,就上手學習吧參照菜鳥教程網站的vue.js教程http://...
前端每周清單第 44 期: 2017 JS 調查報告、REST 接口實時化、ESM 的過去與未來
摘要:巔峰人生年老兵思路上的轉變,遠比單純提升技術更有價值本文節選自趙成教授在極客時間開設的趙成的運維體系管理課,是其對自己十年技術生涯的回顧與總結。趙成教授來自美麗聯合集團,集團旗下兩大主力產品是蘑菇街和美麗說,目前負責管理集團的技術服務團隊。 showImg(https://segmentfault.com/img/remote/1460000012476504?w=1240&h=826...
發表評論
0條評論
pumpkin9
男|高級講師
TA的文章
閱讀更多
tensorflow2.4.1
閱讀 2696·2023-04-25 21:26
能讓你更早下班的Python垃圾回收機制
閱讀 1514·2021-11-25 09:43
css 特殊屬性
閱讀 1949·2019-08-30 15:52
JavaScript實現 滿天星 導航欄
閱讀 932·2019-08-30 14:05
使用H5新標簽重構舊項目時的思考
閱讀 2614·2019-08-29 16:10
canvas 實現 github404動態效果
閱讀 414·2019-08-29 13:48
用PerformanceTiming來檢測頁面性能
閱讀 1860·2019-08-29 12:47
前端必備基礎
閱讀 1299·2019-08-23 18:04