Vue模板邏輯 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　上一篇介紹了Vue的模板內容，而對于一般的模板引擎來說，除了模板內容，還包括模板邏輯。常用的模板邏輯包括條件和循環。本文將詳細介紹Vue模板邏輯

條件渲染

　　在Vue中，實現條件邏輯依靠條件指令，包括v-if、v-else、v-else-if這三個

【v-if】

　　根據表達式的值的真假條件渲染元素。賦值為true時，將元素插入DOM中，否則對應元素從DOM中移除

　　因此，Vue里的v-if指令類似于模板引擎的if條件語句

<div id="app" v-if="seen">
  {{ message }}
</div>

　　上面代碼中，如果"seen"的值為true，則"#app"元素顯示，否則將從DOM中移除

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    seen:true
  }
})
</script>

　　如果想切換多個元素，可以把一個<template>元素當做包裝元素，并在上面使用v-if。最終的渲染結果不會包含<template>元素

<div id="app">
  <template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template> 
</div>

<script>
var app = new Vue({
  el: '#app',
  data:{
    ok:true
  }
})
</script>

【v-else-if】

　　表示 v-if 的 “else if 塊”。可以鏈式調用。前一兄弟元素必須有 v-if 或 v-else-if

【v-else】

　　為 v-if 或者 v-else-if 添加 “else 塊”。前一兄弟元素必須有 v-if 或 v-else-if

　　下面代碼中，當type='A'時，顯示內容為A的div；當type='B'時，顯示內容為B的div；當type='C'時，顯示內容為C的div；否則，顯示內容為D的div

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>D</div>

<script>
var app = new Vue({
    el: "#app",
  data: {
    type:'A'
  }
})
</script>

元素不復用

　　Vue會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做，除了使 Vue 變得非常快之外，還有一些有用的好處

　　例如，如果允許用戶在不同的登錄方式之間切換

<div id="app">
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="輸入用戶名">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="輸入郵箱地址">
  </template>
  <div>
    <button @click="toggle">切換登錄方式</button>
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data:{
    loginType:'username'
  },
  methods:{
    toggle(){
      if(this.loginType === 'username'){
        this.loginType = '';
      }else{
        this.loginType = 'username';
      }
    }
  }
})
</script>

【key屬性】

　　這樣也不總是符合實際需求，所以Vue提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的key屬性即可

<div id="app">
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="輸入用戶名" key="username-input">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="輸入郵箱地址" key="email-input">
  </template>
  <div>
    <button @click="toggle">切換登錄方式</button>
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data:{
    loginType:'username'
  },
  methods:{
    toggle(){
      if(this.loginType === 'username'){
        this.loginType = '';
      }else{
        this.loginType = 'username';
      }
    }
  }
})
</script>

　　現在，每次切換時，輸入框都將被重新渲染

　　[注意]<label> 元素仍然會被高效地復用，因為它們沒有添加 key 屬性

元素顯隱

【v-show】

　　根據表達式的真假值，切換元素的display屬性。當v-show被賦值為true時，元素顯示；否則，元素被隱藏

　　v-show和v-if指令都有元素顯隱的功能，但其原理并不相同。v-if的元素顯隱會將元素從DOM刪除或插入；而v-show則只是改變該元素的display是否為none

　　[注意]v-show 不支持 <template> 語法，也不支持 v-else

v-if vs v-show

　　v-if是“真正的”條件渲染，因為它確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。v-if是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真，才開始渲染條件塊

　　而v-show就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于CSS進行切換

　　一般來說， v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在運行時條件不太可能改變，則使用v-if較好

<div id="app">
    <div v-if="num > 0">if</div>
    <div v-show="num > 0">show</div>
</div>

　　上面代碼中，如果num>0，則內容為if和內容為show的div都顯示；否則都不顯示

<script>
var app = new Vue({
    el: "#app",
  data: {
    num: 1
  }
})
</script>

　　上圖所示，當num=0時，內容為if的div直接從DOM移除，而內容為show的div的display為none

循環渲染

【v-for】

　　v-for指令基于源數據多次渲染元素或模板塊，包含以下用法

數組迭代

　　用 v-for 指令根據一組數組的選項列表進行渲染。 v-for 指令需要以 item in items 形式的特殊語法， items 是源數據數組并且 item 是數組元素迭代的別名

v-for="item in items"

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
})
</script>

　　在v-for塊中，擁有對父作用域屬性的完全訪問權限。v-for還支持一個可選的第二個參數為當前項的索引

v-for="(item, index) in items"

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

　　也可以用 of 替代 in 作為分隔符，它是最接近JS迭代器的語法

<ul id="example-2">
  <li v-for="(item, index) of items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

　　和v-if 模板一樣，也可以用帶有v-for的<template>標簽來渲染多個元素塊

<ul id="example-2">
  <template v-for="item in items">
    <li>{{ item.message }}</li>
    <li>abc</li>
  </template>
</ul>

<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

對象迭代

　　可以用 v-for 通過一個對象的屬性來迭代，第二個參數為鍵名，第三個參數為索引

v-for="(value, key, index) in object"

<ul id="repeat-object" class="demo">
  <li v-for="(value, key, index) in object">
    {{ index }}. {{ key }} : {{ value }}
  </li>
</ul>

<script>
new Vue({
  el: '#repeat-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})
</script>

整數迭代

　　v-for 也可以取整數。在這種情況下，它將重復多次模板

　　[注意]整數迭代是從1開始，而不是從0開始的

<div id="example">
  <span v-for="n in 10">{{ n }} </span>
</div>

<script>
var example = new Vue({
  el: '#example'
})
</script>

【組件】

　　在自定義組件里，可以像任何普通元素一樣用v-for

<my-component v-for="item in items" :key="item.id"></my-component>

　　[注意]2.2.0+ 的版本里，當在組件中使用 v-for 時，key 現在是必須的

　　然而不能自動傳遞數據到組件里，因為組件有自己獨立的作用域。為了傳遞迭代數據到組件里，要用 props

　　不自動注入 item 到組件里的原因是，因為這使得組件會緊密耦合到 v-for 如何運作。在一些情況下，明確數據的來源可以使組件可重用

<div id="example">
  <my-component v-for="(item,index) in items" :msg="item.message" :index="index" :key="item.id"></my-component>
</div>

<script>
// 注冊
Vue.component('my-component', {
  template: '<div>{{index}}.{{msg}}</div>',
  props:['index','msg']
})
// 創建根實例
new Vue({
  el: '#example',
  data(){
    return {
      items: [
        {id:1, message: 'Foo' },
        {id:2, message: 'Bar' },
        {id:3, message: 'Baz' },
      ]
    }
  }
})
</script>

【v-for with v-if】

　　當它們處于同一節點，v-for的優先級比v-if更高，這意味著v-if將分別重復運行于每個v-for循環中。當想為僅有的一些項渲染節點時，這種優先級的機制會十分有用

<ul id="example">
  <li v-for="item in items" v-if="item.isShow">
    {{ item.message }}
  </li>
</ul>

<script>
var example = new Vue({
  el: '#example',
  data: {
    items: [
      {isShow: true,message: 'Foo' },
      {isShow: false,message: 'Bar' },
      {isShow: true,message: 'Baz' }
    ]
  }
})
</script>

　　如果要有條件地跳過循環的執行，那么將 v-if 置于包裝元素 (或 <template>)上

<ul id="example" v-if="isShow">
  <li v-for="(item,index) in items" >
    {{ item.message }}
  </li>
</ul>

<script>
var example = new Vue({
  el: '#example',
  data: {
    isShow:true,
    items: [
      {message: 'Foo' },
      {message: 'Bar' },
      {message: 'Baz' }
    ]
  }
})
</script>

【key】

　　當Vue.js用v-for正在更新已渲染過的元素列表時，它默認用 “就地復用” 策略。如果數據項的順序被改變，Vue將不是移動DOM元素來匹配數據項的順序，而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素

　　這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時DOM狀態(如表單輸入值)的列表渲染輸出

　　為了給Vue一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，需要為每項提供一個唯一key屬性。理想的key值是每項都有唯一id。它的工作方式類似于一個屬性，所以需要用 v-bind 來綁定動態值

<div v-for="item in items" :key="item.id">
  <!-- 內容 -->
</div>

　　建議盡可能使用v-for來提供 key ，除非迭代DOM內容足夠簡單，或者要依賴于默認行為來獲得性能提升。key是Vue識別節點的一個通用機制，key并不特別與v-for關聯

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds