vue v-for直接循环数字，也就是固定次数

项目中需要做一个酒店星级，酒店星级就是固定的5星，根据后台返回的数据来显示几星级

<!--星级，循环固定次数 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"></use>

    <use v-else xlink:href="#ht-icon-xingxing1"></use>

</svg>

最好用的 vue v-for直接循环案例的更多相关文章

  1. vue教程1-03 v-for循环

    vue教程1-03 v-for循环 v-for循环: v-for="name in arr" {{value}} {{$index}} v-for="name in js ...

  2. vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'

    vue教程2-05 v-for循环 重复数据无法添加问题  加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...

  3. for循环案例

    for循环案例 今天给大家介绍点for循环的案例 1.大马驮2石粮食,中马驮1石粮食,两头小马驮一石粮食,要用100匹马,驮100石粮食,该如何调配? <!DOCTYPE html> &l ...

  4. 【laravel5.4+vue.js】laravel 循环三维数组，解决：htmlentities() expects parameter 1 to be string, array given

    laravel循环三维数组   +++   vue.js循环三维数组  (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...

  5. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

  6. Vue.js_判断与循环

    一.判断,条件语句 1.一元表达式判断 {{ ok ? 'show' : 'hide' }} 2.if判断 v-if='ok' <ol id="ifGrammar"> ...

  7. vue 列表渲染 v-for循环

    v-for循环指令类似与html中C标签的循环,同样可以遍历数组,集合. 1.这里演示一下遍历数组的基本用法,代码如下 <!DOCTYPE html> <html> <h ...

  8. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  9. vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等

    项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...

  10. vue 使用v-for进行循环

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. NRF52832中文资料+蓝牙芯片

    [产品应用] Nordic Semiconductor发布采用微型封装尺寸的高性能单芯片低功耗蓝牙SoC器件,瞄准新一代可穿戴产品和空间受限的loT应用.[产品说明]nRF52832晶圆级芯片尺寸封装 ...

  2. 搭PHP本地环境-windows

    项目中要用php开发,但是本地没环境调试不方便,所以搭一下本期环境. 1.下载php phpstudy工具官网:https://www.xp.cn/.phpstudy和WAMP工具的不同之处在于,ph ...

  3. django项目 在进行数据生成迁移文件makemigrations时报Please select a fix:...

    问题:django项目 在进行生成迁移文件:python .\manage.py makemigrations时,报错,如图 原因:在之前项目新建模型的时候,缺少一个字段进行迁移了然后数据表中又产生了 ...

  4. linux 源码安装 xrdp

    前言xrdp可以做两件事,第一件事就是可以使得linux支持RDP协议,使得linux桌面能够通过mstsc连接,第二件事就是RDP代理,我们能通过xrdp连接到其他人的RDP资源 前者,需要编译xr ...

  5. HCIP-ICT实战进阶07-BGP路由选路

    HCIP-ICT实战进阶07-BGP路由选路 1 BGP路径属性 任何一条BGP路由拥有多个路径属性; 当路由器将BGP路由拥有通告他的对等体时, 在Update报文中一并被通告的还有路由所携带的各个 ...

  6. Windows 与Docker

    https://docs.microsoft.com/zh-cn/windows/wsl/install-manual#step-4---download-the-linux-kernel-updat ...

  7. 「SOL」序列计数sequence (模拟赛)

    看了题解过后觉得好像有点熟悉--但是总之是想不起来怎么做的了,自己的做法也和题解不一样. 是一道很好的题啦,把两种做法都写一下作个总结. 题面 给定一个长度为 \(n\) (\(n\le 10^5\) ...

  8. Lubuntu 18.04 自动登录

    参考文章:https://blog.csdn.net/qq_20965753/article/details/61420431 sudo nano /usr/share/lightdm/lightdm ...

  9. Neo4j权威指南学习笔记第一章

    1.创建图数据库 1.1.创建电影节点 CREATE (TheMatrix:Movie {title:'The Matrix', released:1999, tagline:'Welcome to ...

  10. Object.create() 方浅析

    Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__. Object.create(proto[, propertiesObject]) 参数 pro ...