vue v-for直接循環(huán)數字實例
更新時間：2019年11月07日 09:34:50 作者：老黑
今天小編就為大家分享一篇vue v-for直接循環(huán)數字實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue v-for直接循環(huán)數字，也就是固定次數
項目中需要做一個酒店星級，酒店星級就是固定的5星，根據后臺返回的數據來顯示幾星級
<!--星級，循環(huán)固定次數 5次 根據酒店等級顯示亮的星星和灰色的星星--> <svg class="icon" aria-hidden="true" v-for="index of 5" :key="index"> <use v-if="index < hotelInfo.level" xlink:href="#ht-icon-xingxing" rel="external nofollow" ></use> <use v-else xlink:href="#ht-icon-xingxing1" rel="external nofollow" ></use> </svg>
以上這篇vue v-for直接循環(huán)數字實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue中v-for循環(huán)選中點擊的元素并對該元素添加樣式操作
- 詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧
- vue中 v-for循環(huán)的用法詳解
- vue 使用v-for進行循環(huán)的實例代碼詳解
- 使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
- vue基礎之data存儲數據及v-for循環(huán)用法示例
- Vue用v-for給循環(huán)標簽自身屬性添加屬性值的方法
- 基于vue v-for 多層循環(huán)嵌套獲取行數的方法
- 關于vue v-for循環(huán)解決img標簽的src動態(tài)綁定問題
- 編寫v-for循環(huán)的技巧匯總
相關文章
這篇文章主要介紹了Vue組件的繼承用法,本文通過實例代碼案例講解給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue 打包后找不到dist文件夾的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要給大家介紹了Vue3自定義指令的相關資料,自定義指令是一種在Vue應用程序中擴展HTML標簽的能力,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-09-09
keep-alive是Vue中一個非常有用的特性,它可以幫助我們避免重復渲染和減少組件的渲染次數,從而提高應用程序的性能,本文給大家介紹keep-alive組件緩存的相關知識,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了如何修改vue-treeSelect的高度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本文給大家介紹基于 Vue 實現一個酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎知識，本文分步驟給大家介紹的非常詳細，需要的朋友參考下吧2017-11-11
這篇文章主要為大家介紹了vue的父子組件傳值，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家介紹了VueJs中toRef與toRefs函數對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了vue 實現可拖曳的樹狀結構圖，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細介紹了Vue3中響應式的一些特殊處理，文中的示例代碼講解詳細，對我們深入了解Vue3有一定的幫助，需要的可以參考一下2023-04-04