Analisis contoh fungsi pemaparan bersyarat dalam dokumen Vue

Vue ialah rangka kerja JavaScript yang sangat popular Ia menyediakan beberapa alatan dan fungsi yang mudah untuk pembangun, membolehkan pembangun membina aplikasi web yang kompleks dengan lebih mudah. Antaranya, fungsi pemaparan bersyarat ialah fungsi yang sangat berguna dalam Vue, yang boleh membantu pembangun mengawal dan memaparkan elemen pada halaman secara dinamik. Dalam artikel ini, kami akan menganalisis dan menunjukkan fungsi pemaparan bersyarat dalam dokumen Vue.

1 Pengenalan kepada fungsi pemaparan bersyarat Vue

Anda boleh menggunakan arahan v-if dan v-show dalam Vue untuk melaksanakan pemaparan bersyarat. Arahan ini membolehkan kami mengawal sama ada elemen tertentu perlu dipaparkan pada halaman berdasarkan syarat.

Arahan v-if menentukan sama ada elemen perlu diberikan berdasarkan nilai ungkapan Jika nilai ungkapan itu benar, elemen tersebut akan dipaparkan; Contohnya:

<div v-if="shown">
  这是一个需要被渲染出来的div元素
</div>

Dalam contoh di atas, elemen div akan dipaparkan pada halaman hanya apabila nilai atribut yang ditunjukkan bagi tika Vue adalah benar.

Arahan v-show juga boleh melaksanakan pemaparan bersyarat bagi elemen, tetapi pelaksanaannya berbeza sedikit daripada v-if. Arahan v-show secara dinamik menukar atribut paparan elemen berdasarkan nilai ungkapan Jika nilai ungkapan adalah benar, atribut paparan elemen ditetapkan untuk menyekat, supaya elemen dipaparkan pada halaman. ; jika tidak, atribut paparan elemen ditetapkan untuk menyekat Menetapkan atribut paparan kepada tiada menyebabkan elemen disembunyikan pada halaman. Contohnya:

<div v-show="shown">
  这是一个需要被渲染出来的div元素
</div>

Dalam contoh di atas, selagi nilai atribut yang ditunjukkan bagi contoh Vue adalah benar, elemen div akan dipaparkan, jika tidak ia akan disembunyikan.

2. Perbezaan antara v-if dan v-show

Walaupun kedua-dua v-if dan v-show boleh mencapai pemaparan bersyarat bagi elemen, ia berbeza dalam kaedah pelaksanaannya aspek berikut:

1. Memberikan overhed

Arahan v-if menilai semula nilai ungkapan bersyarat setiap kali ia diberikan, dan berdasarkan nilai The daripada ungkapan untuk menambah atau mengalih keluar elemen. Oleh itu, apabila nilai ungkapan bersyarat adalah kompleks atau terdapat banyak elemen, overhed pemaparan v-if akan menjadi agak besar.

Arahan v-show hanya menyembunyikan atau memaparkan elemen dengan menukar atribut paparan elemen secara dinamik. Tidak perlu mencipta semula atau mengalih keluar elemen, jadi overhed pemaparan adalah agak kecil. Walau bagaimanapun, semasa pemaparan awal elemen, arahan v-show perlu terlebih dahulu menentukan nilai ungkapan bersyarat dan menetapkan atribut paparan elemen berdasarkan nilai ini, jadi kelajuan pemaparan mungkin lebih perlahan daripada v-if.

2. Mulakan pemaparan overhed

Arahan v-jika tidak akan dipaparkan apabila ungkapan bersyarat pada mulanya palsu. Rendering hanya akan bermula apabila nilai ungkapan bersyarat menjadi benar. Oleh itu, overhed pemaparan awal v-if akan menjadi lebih kecil daripada v-show.

Semasa pemaparan awal, arahan v-show akan secara dinamik menetapkan atribut paparan elemen berdasarkan nilai ungkapan bersyarat untuk menentukan sama ada elemen dipaparkan. Oleh itu, overhed pemaparan awal bagi v-show akan lebih besar daripada v-if.

3. Prestasi pemaparan

Apabila nilai ungkapan bersyarat berubah, arahan v-if akan menilai semula dan mencipta semula atau mengalih keluar elemen yang sepadan. Apabila hanya sebilangan kecil elemen perlu dipaparkan secara dinamik, prestasi v-if akan lebih baik sedikit daripada v-show.

Arahan v-show hanya mengawal paparan dan menyembunyikan elemen dengan menukar atribut paparan elemen secara dinamik. Tidak perlu mencipta semula atau mengalih keluar elemen. Oleh itu, apabila perlu kerap menukar paparan dan menyembunyikan elemen, prestasi v-show akan lebih baik daripada v-if.

3. Pemilihan senario penggunaan v-if dan v-show

Berdasarkan perbezaan di atas, kita boleh memilih v-if dan v-show mengikut keperluan sebenar.

Apabila anda perlu kerap menukar paparan dan menyembunyikan elemen, anda boleh memilih untuk menggunakan arahan v-show. Contohnya: digunakan untuk menunjukkan dan menyembunyikan panel operasi atau kotak dialog tertentu, menukar menu, dsb.

Apabila anda perlu menentukan sama ada elemen tertentu perlu dipaparkan berdasarkan logik kompleks, atau apabila anda perlu mencipta atau mengalih keluar elemen secara dinamik, anda boleh menggunakan arahan v-if. Contohnya: memberikan elemen tertentu dalam halaman mengikut status log masuk pengguna, memberikan butang operasi tertentu dalam halaman mengikut kebenaran pengguna, dsb.

4. Contoh analisis

Mari kita tunjukkan penggunaan v-if dan v-show berdasarkan contoh.

Andaikan kita perlu memaparkan senarai produk pada halaman. Senarai ini mengandungi maklumat seperti nama produk, harga, inventori dan butang pembelian. Pada masa yang sama, senarai juga perlu menyediakan fungsi penapisan supaya pengguna boleh melihat maklumat produk yang berbeza berdasarkan keadaan yang berbeza. Pelaksanaan khusus adalah seperti berikut:

1. Tentukan data senarai produk

Mula-mula kita perlu mentakrifkan tatasusunan yang mengandungi maklumat produk Di sini kita buat sementara andaian bahawa tatasusunan itu sudah mengandungi 10 maklumat produk. Format tatasusunan adalah seperti berikut:

goodsList: [
  {
    name: "商品A",
    price: 100,
    stock: 50
  },
  {
    name: "商品B",
    price: 200,
    stock: 80
  },
  ...
]

2. Tentukan keadaan penapis dan data hasil penapis

Untuk melaksanakan fungsi penapisan, kita perlu menentukan bentuk yang mengandungi kotak input keadaan penapis. Melalui kotak input ini, pengguna boleh memasukkan keadaan penapis yang berbeza untuk melihat maklumat produk yang berbeza.

Pada masa yang sama, kita juga perlu menentukan pembolehubah untuk menyimpan hasil yang ditapis, supaya dapat menapis produk yang tidak memenuhi syarat penapisan. Keadaan penapis dan hasil penapis ditakrifkan seperti berikut:

filterForm: {
  name: "",
  minPrice: "",
  maxPrice: ""
},
filteredGoodsList: []

3. 实现筛选逻辑

为了实现筛选功能，我们需要在Vue实例中定义一个方法，该方法会在每次需要筛选时被调用。该方法会根据用户输入的筛选条件，从商品列表中筛选出符合条件的商品，并将结果存储到filteredGoodsList中。

具体实现代码如下：

methods: {
  filterGoodsList() {
    let filterName = this.filterForm.name.toLowerCase()
    let filterMinPrice = this.filterForm.minPrice ? parseInt(this.filterForm.minPrice) : Number.MIN_SAFE_INTEGER
    let filterMaxPrice = this.filterForm.maxPrice ? parseInt(this.filterForm.maxPrice) : Number.MAX_SAFE_INTEGER
    this.filteredGoodsList = this.goodsList.filter((item) => {
      let itemName = item.name.toLowerCase()
      return itemName.indexOf(filterName) !== -1 && item.price >= filterMinPrice && item.price <= filterMaxPrice
    })
  }
}

在这个方法中，我们首先将用户输入的筛选条件分别提取出来，并将maxPrice和minPrice转换为数字类型。然后，我们使用JavaScript数组的filter方法，从商品列表中筛选出符合条件的商品。可以看到，我们使用了itemName.indexOf(filterName) !== -1这种方式，即通过JavaScript中字符串的indexOf方法来检查itemName是否包含了filterName这个子串。如果包含，则返回true，表示该商品符合筛选条件；否则返回false，表示该商品不符合筛选条件。最后，我们将筛选结果存储到filteredGoodsList中。

4. 实现列表渲染

我们可以通过v-for指令来遍历filteredGoodsList数组，并将每个数组元素渲染成一个商品信息块。具体实现代码如下：

<div v-for="(item, index) in filteredGoodsList" :key="index" class="goods-item">
  <div class="goods-name">{{ item.name }}</div>
  <div class="goods-price">{{ item.price }}</div>
  <div class="goods-stock">{{ item.stock }}</div>
  <div class="goods-buy-btn" v-show="item.stock > 0">购买</div>
  <div class="goods-sold-out" v-if="item.stock == 0">已售罄</div>
</div>

在这个代码中，我们将v-for指令绑定到filteredGoodsList数组上，这样就可以遍历这个数组中的所有元素。我们使用: key="index"来为每个元素设置一个唯一的key值，以便Vue能够高效地对列表进行更新。

在每个商品信息块中，我们使用v-show和v-if指令来根据不同的商品库存信息来动态展示不同的元素。如果该商品库存大于0，则会显示购买按钮；否则，会显示“已售罄”的文字提示。

5. 实现筛选表单和筛选按钮

最后，我们需要在页面上添加一个筛选表单，让用户可以输入不同的筛选条件来观察不同的商品信息。表单的代码如下：

<div class="filter-form">
  <label for="filter-name">商品名称：</label>
  <input type="text" id="filter-name" v-model="filterForm.name">
  <label for="filter-min-price">价格区间：</label>
  <input type="text" id="filter-min-price" placeholder="最小价格" v-model="filterForm.minPrice">
  -
  <input type="text" id="filter-max-price" placeholder="最大价格" v-model="filterForm.maxPrice">
  <button @click="filterGoodsList">筛选</button>
</div>

在这个代码中，我们使用了v-model指令将表单元素和Vue实例中的filterForm对象绑定在一起，从而实现了双向数据绑定。我们还添加了一个筛选按钮，在用户点击按钮时会触发filterGoodsList方法，从而重新进行商品列表的筛选和渲染。

六、总结

通过以上分析和实例演示，我们了解了Vue文档中的条件渲染函数的基本知识和使用方法，以及v-if和v-show指令在渲染开销、初始化渲染开销和渲染性能等方面的不同表现。最后，我们还运用条件渲染函数的知识，实现了一个商品列表及其筛选功能的实例。相信这些内容能够对您学习和使用Vue框架提供一些帮助。

Atas ialah kandungan terperinci Analisis contoh fungsi pemaparan bersyarat dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!