Vue.js 條件與回圈

<template>
  <div id="app">
    <p v-if="show1">text1</p>
    <p v-if="show2">text2</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      show1:false,
      show2:true
    }
  }
}
</script>

<style scoped>

</style>

可以用 v-else 指令給 v-if 添加一個 "else" 塊：

<template>
  <div id="app">
    <div v-if="Math.random()>0.5">
        大于0.5
    </div>
    <div v-else>
        小于等于0.5
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
    }
  }
}
</script>

<style scoped>

</style>

v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊，可以鏈式的多次使用

也可以使用 v-show 指令來根據條件展示元素：

<h1 v-show="ok">Hello!</h1>

v-if 與 v-show 的區別？

在切換 v-if 塊時，Vue.js 有一個區域編譯/卸載程序，因為 v-if 之中的模板也可能包括資料系結或子組件，v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件，

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變為真時才開始區域編譯（編譯會被快取起來），

相比之下，v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換，

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗，因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好，

簡單來說就是：

v-if 是動態添加，當值為 false 時，是完全移除該元素，即 dom 樹中不存在該元素，

v-show 僅是隱藏 / 顯示，值為 false 時，該元素依舊存在于 dom 樹中，若其原有樣式設定了 display: none 則會導致其無法正常顯示，

關于 <template></template> 內容可見性問題：

當 <template> 元素被包含在已被 vue 實體化之后的組件中時瀏覽器會正常渲染 可以用 v-if="false" 隱藏瀏覽器不會決議，不能使用 v-show，

回圈使用 v-for 指令，

v-for 指令需要以 site in sites 形式的特殊語法， sites 是源資料陣列并且 site 是陣列元素迭代的別名，

v-for 可以系結資料到陣列來渲染一個串列：

<template>
  <div id="app">
    <div v-for="item in names" :key={item}>
      {{item.name}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      names:[
        {name:'cyy1'},
        {name:'cyy2'},
        {name:'cyy3'}
      ]
    }
  }
}
</script>

<style scoped>

</style>

v-for 可以通過一個物件的屬性來迭代資料：

<template>
  <div id="app">
    <div v-for="value in person" :key={value}>
      {{value}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      person:{
        name:'cyy',
        age:18,
        sex:'girl'
      }
    }
  }
}
</script>

<style scoped>

</style>

也可以提供第二個的引數為鍵名：

<template>
  <div id="app">
    <div v-for="(value,key) in person" :key={value}>
      {{key}}:{{value}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      person:{
        name:'cyy',
        age:18,
        sex:'girl'
      }
    }
  }
}
</script>

<style scoped>

</style>

第三個引數為索引：

<template>
  <div id="app">
    <div v-for="(value,key,index) in person" :key={index}>
      {{index}}.{{key}}: {{value}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      person:{
        name:'cyy',
        age:18,
        sex:'girl'
      }
    }
  }
}
</script>

<style scoped>

</style>

v-for 也可以回圈整數

<template>
  <div id="app">
    <div v-for="n in 10" :key="n">
      {{n}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{

    }
  }
}
</script>

<style scoped>

</style>

v-for 還可以回圈陣列：

<template>
  <div id="app">
    <div v-for="n in [1,3,5,7,9]" :key="n">
      {{n}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{

    }
  }
}
</script>

<style scoped>

</style>

九九乘法表

<template>
  <div id="app">
    <div v-for="n in 9" :key="n">
      <span v-for="m in n" :key="m">
        {{m}}*{{n}}={{m*n}}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{

    }
  }
}
</script>

<style scoped>

</style>

標籤：JavaScript

上一篇：Vue.js 模板語法簡單匯總

下一篇：H5頁面常見開發問題總結