2. 程式人生 > >Vue.js筆記-條件渲染 列表渲染

Vue.js筆記-條件渲染 列表渲染

阿新 • • 發佈：2019-01-07

條件渲染

v-if
  1. <div id="demo">
  2. <div v-if="abc">{{abc.a}}</div>    //該值為true時顯示該標籤，為false則不顯示
  3. </div>
  4. <script>
  5. var vm =newVue({
  6. el:'#demo',
  7. data:{
  8. abc:{
  9. a:"1"
  10. }
  11. }
  12. })
  13. </script>
if...else結構
  1. <h1 v-if="ok">Yes</h1>
  2. <h1 v-else>No</h1>
if...else if...else結構，if-else用嵌入的方式放進去
  1. <div v-if=""></div>
  2. <template v-else>
  3. <div v-if=""></div>
  4. <div v-else></div>
  5. </template>
       v-else 元素必須立即跟在 v-if 或 v-show 元素的後面——否則它不能被識別。
template v-if
        如果想切換多個元素，可以把一個<template>元素當作包裝元素，並在上面使用v-if，最終的渲染結果不會包含它。
  1. <template v-if="ok"
    >
  2. <h1>Title</h1>
  3. <p>Paragraph1</p>
  4. <p>Paragraph2</p>
  5. </template>
v-show
       不同的是有 v-show 的元素會始終渲染並保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display。注意 v-show 不支援 <template> 語法。
  1. <h1 v-show="ok">Hello!</h1>
       v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——在條件第一次變為真時才開始區域性編譯（編譯會被快取起來）。相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
         一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在執行時條件不大可能改變 v-if 較好。

 列表渲染

v-for
        基於一個數組渲染一個列表。
        語法：item in items（陣列元素的別名 in 資料陣列）
  1. <ul id="example-1">
  2. <li v-for="item in items">
  3. {{ item.message }}
  4. </li>
  5. </ul>
  6. var example1 =newVue({
  7.   el:'#example-1',
  8.   data:{
  9.     items:[
  10. { message:'Foo'},
  11. { message:'Bar'}
  12. ]
  13. }
  14. })
       在 v-for 塊內我們能完全訪問父元件作用域內的屬性，另有一個特殊變數 $index，是當前陣列元素的索引。另外，可以為索引指定一個別名（如果 v-for 用於一個物件，則可以為物件的鍵指定一個別名）：
  1. <div v-for="(index, item) in items">
  2. {{ index }}{{ item.message }}
  3. </div>
       從 1.0.17 開始可以使用 of 分隔符，更接近 JavaScript 遍歷器語法：
  1. <div v-for="item of items"></div>
template v-for
   渲染一個包含多個元素的塊，需要將多個標籤都用v-for遍歷，那麼就需要用template標籤。同樣，template在實際渲染的時候不會出現，只是起到一個包裹作用。
  1. <div id="app">
  2. <ul>
  3. <template v-for="i in items">
  4. <li>Index is {{$index}}</li>
  5. <li>Content is {{i}}</li>
  6. </template>
  7. </ul>
  8. </div>
  9. <script>
  10.     var vm =newVue({
  11.         el:'#app',
  12.         data:{
  13.             items:{
  14.                 a:"1",
  15.                 b:"2",
  16.                 c:"3"
  17. }
  18. }
  19. })
  20. </script>
        渲染為：
  1. <ul>
  2. <li>Index is 0</li><li>Content is 1</li>
  3. <li>Index is 1</li><li>Content is 2</li>
  4. <li>Index is 2</li><li>Content is 3</li>
  5. </ul>
陣列變動檢測
變異方法（修改了原始陣列）：         vue.js包裝了被觀察陣列的變異方法，故它們能出發檢視更新，即當利用這些方法變更陣列時，被渲染的內容會實時更新，被包裝的方法有：
  • push()         陣列末尾新增
  • pop()           陣列末尾取出
  • shift()          陣列開頭取出
  • unshift()      陣列開頭新增
  • splice()        刪除並插入
  • sort()           排序
  • reverse()     陣列順序顛倒
  1. <ul id="demo">
  2. <li v-for="item in items">
  3. {{item}}
  4. </li>
  5. </ul>
  6. <script>
  7.         var vm =newVue({
  8.             el:'#demo',
  9.             data:function(){
  10. return{items:[4,2,3].splice(0,2)};
  11. }
  12. })
  13. </script>
替換陣列（返回一個新陣列）：        陣列從一個數組變為另一個數組時（記得，陣列是按引用傳遞的），資料繫結依然生效；但前提是使用以下方法： filter()           過濾，引數是一個函式，取其返回值為true的元素被新增到新陣列 concat()       合併兩個陣列，返回的陣列是合併後的 slice()           返回陣列的拷貝，從開始索引到結束索引（前含後不含） track-by：        有時需要用全新物件（例如通過 API 呼叫建立的物件）替換陣列。因為 v-for 預設通過資料物件的特徵來決定對已有作用域和 DOM 元素的複用程度，這可能導致重新渲染整個列表。但是，如果每個物件都有一個唯一 ID 的屬性，便可以使用 track-by 特性給 Vue.js 一個提示，Vue.js 因而能儘可能地複用已有例項。
例如，假定資料為：
  1. {
  2.   items:[
  3. { _uid:'88f869d',...},
  4. { _uid:'7496c10',...}
  5. ]
  6. }
然後可以這樣給出提示：
  1. <div v-for="item in items" track-by="_uid">
  2. <!-- content -->
  3. </div>
       然後在替換陣列 items 時，如果 Vue.js 遇到一個包含 _uid: '88f869d' 的新物件，它知道它可以複用這個已有物件的作用域與 DOM 元素。 track-by $index        如果沒有唯一的鍵供追蹤，可以使用 track-by="$index"，它強制讓 v-for 進入原位更新模式：片斷不會被移動，而是簡單地以對應索引的新值重新整理。這種模式也能處理資料陣列中重複的值。        這讓資料替換非常高效，但是也會付出一定的代價。因為這時 DOM 節點不再對映陣列元素順序的改變，不能同步臨時狀態（比如 <input> 元素的值）以及元件的私有狀態。因此，如果 v-for 塊包含 <input> 元素或子元件，要小心使用 track-by="$index"。 問題：         vue.js不能檢測到下面陣列變化：
  • 直接用索引設定元素，如 vm.items[0] = {}
       解決方案，$set()方法，demo.items.$set( 0 , {childMsg:'changed!'} )
  • 修改資料的長度，如 vm.items.length = 0
       解決方案：只需要用一個空陣列替換items         從目標陣列中查詢並刪除元素，在內部呼叫splice()，this.items.$remove(item)
  1. <ul id="demo">
  2. <li v-for="item in items">
  3. {{item.name}}
  4. </li>
  5. </ul>
  6. <button onclick ="change()">移除</button>
  7. <script>
  8.         var test ={name:'d'}
  9.         var vm =newVue({
  10.             el:'#demo',
  11.             data:{
  12.                 items:[
  13. {name:'a'},
  14. {name:'b'},
  15. {name:'c'}
  16. ]
  17. },

  18. 相關推薦

    Vue.js筆記-條件渲染 列表渲染

    條件渲染 v-if <div id="demo"><div v-if="abc">{{abc.a}}</div>    //該值為true時顯示該標籤，為false則不顯示</div><script> va

    Vue.js（五）列表渲染 v-for

    但是 todo dex length ref 循環 模式 ssa 默認 v-for="item in items " // 數組更新檢測 // 對象更改檢測註意事項 // 顯示過濾 / 排序結果 // 一段取值範圍的 v-for // v-for

    02 . Vue入門基礎之條件渲染,列表渲染,事件處理器,表單控制元件繫結

    #### vue基礎 ##### 宣告式渲染 `Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統` `Example1` ```vue Examples {{ 10+203 }} {{ myname }

    Vue源碼後記-vFor列表渲染（2）

    property per share turn logs eno ext 形參 dsl 這一節爭取搞完！ 　　 　　回頭來看看那個render代碼，為了便於分析，做了更細致的註釋； (function() { // 這裏this指向vue對象 下面

    Vue源碼後記-vFor列表渲染（3）

    undefined ++ 源碼 blog back war 什麽 tns check 　　這一節肯定能完！ 　　 　　經過DOM字符串的AST轉化，再通過render變成vnode，最後就剩下patch到頁面上了。 　　render函數跑完應該是在這裏： func

    vue學習：v-for列表渲染

    一、用 v-for 把一個數組對應為一組元素 我們用 v-for 指令根據一組陣列的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源資料陣列並且 item 是陣列元素迭代的別名。 <ul id="example

    使用 PHP 來做 Vue.js 的 SSR 服務端渲染

    對於客戶端應用來說，服務端渲染是一個熱門話題。然而不幸的是，這並不是一件容易的事，尤其是對於不用 Node.js 環境開發的人來說。 讓我們一起來仔細研究一些服務端渲染的概念，權衡優缺點，然後遵循第一法則用 PHP 建立一個服務端渲染。 什麼是服

    Vue.js優雅的實現列表清單

    叠代 logs 編輯 關心 rect 之間 images 頁面 是否 一、Vue.js簡要說明 原文章鏈接 http://www.cnblogs.com/zjf-1992/p/7834797.html Vue.js (讀音 /vju?/) 是一套構建用戶界面的漸

    vue.js筆記（二）

    ceo fad cli ani -s animate nbsp tran rip animate.css動畫 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

    Vue.js 筆記

    blank node -s font ins 推薦 chrom 增量 一個 作者：gqk: Node.js: 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 的包管理器 npm，是全球最大的開源庫生態系統。 說明安裝成功；

    Vue.js 筆記（二） 模板語法

    指令 1. 以 v-  開頭 常見有：v-bind(資料單向輸出),v-html(顯示html),v-model(資料雙向繫結),v-if(條件，是否插入元素)，v-on(事件) 2. 引數，指令後加冒號，如：v-bind:class='class1'  將

    Vue.js 筆記（一） 起步

    快速入門 <!DOCTYPE html> <html lang="zh" dir="ltr"> <head> <meta charset="utf-8"> <title>vue test </titl

    前端JS框架——Vue.js筆記（一）

    基本的Vue程式碼結構： 插值表示式： v-text: 使用v-cloak解決v-text閃爍問題： 使用v-html對html格式文字進行渲染 使用v-bind進行資料繫結： 它的縮寫是: 使用v-on進行事件監聽繫結： 它的縮寫是@符號 事件修飾符：

    Vue.js筆記-表單控制元件繫結

    基礎語法         可以用v-model指令在表單控制元件元素上建立雙向資料繫結，根據控制元件型別它自動選取正確的方法更新元素。 text <span>Message is

    初入vue.js，vue.js筆記

    1、vue.js簡介          Vue.js 是用於構建互動式的 Web 介面的庫。它提供了 MVVM 資料繫結和一個可組合的元件系統，具有簡單、靈活的 API。            從技術上講， Vue.js 集中在 MVVM 模式上的檢視模型層，並通過雙向資料

    Vue學習筆記九：列表案例

    The border reac val -h 框架 一行 spl this 目錄 前言 Bootstrap插件下載 Bootstrap表格和面板 增加數據，v-model和

    【Vue.js學習筆記】6：動態繫結CSS樣式,條件渲染和v-show

    動態繫結CSS樣式 這部分涉及官方文件中的Class與Style繫結。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:

    vue學習筆記(五)條件渲染和列表渲染

    前言 在眾多的程式語言中，我們的基礎語法總是少不了一些專業語法，比如像定義變數，條件語句，for迴圈，陣列，函式等等，vue.js這個優秀的前端框架中也有同樣的語法，我們換一個名詞，將條件語句改成專業詞彙叫做條件渲染，迴圈語句改成專業詞彙叫做列表渲染，這樣比較舒服一點。 本章目標 學會條件渲染的使用

    vue 條件渲染與列表渲染

    title 計算屬性 需求 nal fit login 想要 ext clas 本文是對官方文檔的整理 因為 v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 <template> 元素當做不可見的包裹元素，並在上面使

    VUE：條件渲染和列表渲染

    條件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head>