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

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

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

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

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

對比學(xué)習(xí)

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

我們有一個(gè) 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 ,我們可以這樣實(shí)現(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 放在同一個(gè)元素上,我們在 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 在同一個(gè)元素上使用是無法直接在 vue3.x 中兼容的。

最佳實(shí)踐

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

模板部分:

<div id="app">
 <!-- 最佳實(shí)踐 -->
 <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);
 },
 },
});

點(diǎn)擊查看: vue3示例 vue2示例

總結(jié)

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

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

相關(guān)文章

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

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

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

    ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用

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

    vue項(xiàng)目打包開啟gzip壓縮具體使用方法

    這篇文章主要為大家介紹了vue項(xiàng)目打包開啟gzip壓縮具體使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    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)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • vue中關(guān)于$emit和$on的使用及說明

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

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

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

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

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

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

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

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

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

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

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

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

最新評論