欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2和vue3的v-if與v-for優(yōu)先級對比學習

 更新時間:2020年10月10日 11:35:00   作者:前端攻城師_老李  
這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級對比學習,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

Vue.js 中使用最多的兩個指令就是 v-ifv-for ,因此我們可能會想要同時使用它們。雖然官方不建議這樣做,但有時確實是必須的,我們來了解下他們的工作方式:

  • 在 vue 2.x 中,在一個元素上同時使用 v-ifv-for 時, v-for 會優(yōu)先作用。
  • 在 vue 3.x 中, v-if 總是優(yōu)先于 v-for 生效。

對比學習

接下來我們通過一個簡單的示例來感知下,假設我們想要實現(xiàn)一個極簡的 todoList 效果:

我們有一個 todoList:

const todoList = [
 {
 id: 0,
 task: '吃飯',
 done: true,
 },
 {
 id: 1,
 task: '睡覺',
 done: false,
 },
 {
 id: 2,
 task: '洗澡',
 done: true,
 },
 // ...,
];

在 vue2 中, v-for 優(yōu)先級高于 v-if ,我們可以這樣實現(xiàn):

<ul>
 <!-- vue2中,v-for優(yōu)先級高于v-if -->
 <li v-for="item in todoList" v-if="!item.done" :class="{todo: !item.done}" :key="item.id">
 <span>{{item.task}}</span>
 </li>
</ul>

<ul>
 <li v-for="item in todoList" v-if="item.done" :class="{finished: item.done}" :key="item.id">
 <span>{{item.task}}</span>
 </li>
</ul>

在 vue3 中,由于 v-if 優(yōu)先級要高于 v-for ,所以不能像 vue2 那樣將 v-forv-if 放在同一個元素上,我們在 li 外面套一層用來執(zhí)行 for 循環(huán):

<ul>
 <template v-for="item in list" :key="item.id">
 <li v-if="!item.done" :class="{todo: !item.done}">
  <span>{{item.task}}</span>
 </li>
 </template>
</ul>
<ul>
 <template v-for="item in list" :key="item.id">
 <li v-if="item.done" :class="{finished: item.done}">
  <span>{{item.task}}</span>
 </li>
 </template>
</ul>

可以看出,如果在 vue2.x 中 v-ifv-for 在同一個元素上使用是無法直接在 vue3.x 中兼容的。

最佳實踐

針對 v-ifv-for 的使用,其實官方是建議我們使用計算屬性來處理的,這樣既提高了性能,又可以兼容到 vue3.x,接下來我們看看計算屬性實現(xiàn)方式:

模板部分:

<div id="app">
 <!-- 最佳實踐 -->
 <ul class="todo-list">
 <li v-for="item in todos" class="todo" :key="item.id">
  <span>{{item.task}}</span>
 </li>
 </ul>

 <ul v-if="showFinished">
 <li v-for="item in finished" :key="item.id" class="finished">
  <span>{{item.task}}</span>
 </li>
 </ul>

 <p>
 show finished?
 <input type="checkbox" v-model="showFinished" />
 {{showFinished ? 'yes' : 'no'}}
 </p>
</div>

js 部分:

// vue3.x
Vue.createApp({
 data() {
 return {
  msg: 'Todo List',
  showFinished: true,
  list: todoList,
 };
 },
 computed: {
 finished() {
  return todoList.filter(t => t.done);
 },
 todos() {
  return todoList.filter(t => !t.done);
 },
 },
}).mount('#app');

// vue2.x
new Vue({
 el: '#app',
 data() {
 return {
  msg: 'Todo List',
  showFinished: true,
  list: todoList,
 };
 },
 computed: {
 finished() {
  return todoList.filter(t => t.done);
 },
 todos() {
  return todoList.filter(t => !t.done);
 },
 },
});

點擊查看: vue3示例 、vue2示例

總結(jié)

  1. vue2.x 中 v-for 優(yōu)先級高于 v-if ,vue3.x 相反;
  2. 盡量避免在同一個元素上面同時使用 v-ifv-for ,建議使用計算屬性替代。

到此這篇關(guān)于vue2和vue3的v-if與v-for優(yōu)先級對比學習的文章就介紹到這了,更多相關(guān)v-if與v-for優(yōu)先級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 如何使用vue實現(xiàn)前端導入excel數(shù)據(jù)

    如何使用vue實現(xiàn)前端導入excel數(shù)據(jù)

    在實際開發(fā)中導入功能是非常常見的,導入功能前端并不難,下面這篇文章主要給大家介紹了關(guān)于如何使用vue實現(xiàn)前端導入excel數(shù)據(jù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • ejsExcel模板在Vue.js項目中的實際運用

    ejsExcel模板在Vue.js項目中的實際運用

    這篇文章主要介紹了ejsExcel模板在Vue.js項目中的實際運用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • vue項目打包開啟gzip壓縮具體使用方法

    vue項目打包開啟gzip壓縮具體使用方法

    這篇文章主要為大家介紹了vue項目打包開啟gzip壓縮具體使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • Vue中Mustache插值語法與v-bind指令詳解

    Vue中Mustache插值語法與v-bind指令詳解

    在Vue中通過Mustache語法(雙大括號)將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache插值語法與v-bind指令的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • vue中關(guān)于$emit和$on的使用及說明

    vue中關(guān)于$emit和$on的使用及說明

    這篇文章主要介紹了vue中關(guān)于$emit和$on的使用及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue如何使用外部特殊字體的操作

    vue如何使用外部特殊字體的操作

    這篇文章主要介紹了vue如何使用外部特殊字體的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue中的插槽Slot技術(shù)詳解

    Vue中的插槽Slot技術(shù)詳解

    插槽(Slot)技術(shù)是一種用于組件化開發(fā)的重要技術(shù),允許我們在組件中定義一些占位符,在Vue中,插槽的使用方式可以分為三種:默認插槽、具名插槽和作用域插槽,下面我們就來看看這三種方式的具體使用吧
    2023-09-09
  • Vue中獲取圖片高度的兩種方法

    Vue中獲取圖片高度的兩種方法

    在使用Vue2開發(fā)移動端頁面的時候,需要做一個效果,實現(xiàn)的方案是背景漸變,但是想要實現(xiàn)這個效果就必須進行定位,我的背景高度需要在一個十分恰當?shù)奈恢?但是我的圖片會隨著移動端頁面的變化而發(fā)生高度的變化,為什么會變化?所以本文介紹了Vue中獲取圖片高度的方法
    2024-08-08
  • 淺談Vue為什么不能檢測數(shù)組變動

    淺談Vue為什么不能檢測數(shù)組變動

    這篇文章主要介紹了淺談Vue為什么不能檢測數(shù)組變動,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • 在Vue中使用Viser說明(基于AntV-G2可視化引擎)

    在Vue中使用Viser說明(基于AntV-G2可視化引擎)

    這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10

最新評論