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. kail 系统更新

    原文链接:https://blog.csdn.net/aiming66/article/details/123203495

  2. Excel工具（批量生成txt）

    Sub txt() Dim i, j, arr(), brr(), myRow, myCol arr = Sheet1.UsedRange myRow = UBound(arr, 1) myCol = ...

  3. 使用Telnet伪造邮件发送

    注意:手抖就会败北,敲错就会白给,输入错误只能rset重新输入命令. 1.打开Telnet服务 搜索"程序和功能"->启用或关闭Windows功能->点选Telnet客 ...

  4. Redis哨兵模式+缓存穿透、击穿和雪崩

    一.哨兵模式概述(自动选主机的方式)主从切换技术:当主机宕机后,需要手动把一台从(slave)服务器切换为主服务器,这就需要人工干预,费时费力,还回造成一段时间内服务不可用,所以推荐哨兵架构(Sent ...

  5. 手写Web图片懒加载~

    废话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>图片懒加载</title> ...

  6. java.net.ConnectException: Your endpoint configuration is wrong; For more details see: http://wiki.apache.org/hadoop/UnsetHostnameOrPort

    今天使用在hive中建表,并在hive中将查询到的语句插入到新表中时,一直开在如图所示位置不动 等待了20多分钟,然后报了这么个错 java.net.ConnectException: Your en ...

  7. 关于oracle中scott用户恢复到初始状态的步骤，和一些问题解决方法。

    一般恢复步骤: sqlplus 连接到sys用户sqlplus / as sysdba运行脚本进行初始恢复start ?/rdbms/admin/utlsampl.sql;恢复后,用户为锁定状态,需要 ...

  8. npm升级报错,没有权限.ERRERR!The operation was rejected by your operating system. npm ERR!Error: EPERM: operation not permitted, rename

    问题描述 Windows system32>npm installg npm 2335 error code EEXIST2336 error path D:\Program Files\nod ...

  9. C语言的qsort函数

    C函数----qsort 函数 qsort()看起来和C++的sort()差不多,但是其实差别很大, qsort的cmp函数,传入的是指针,返回值是int sort的则传入值,返回值是bool 当qs ...

  10. lua如何转化为exe

    在这里下载    https://wwn.lanzout.com/iIS9d07rpesh 然后用cmd到 下载的盘:\luapack\luapack\bin\Debug 然后glue.exe srl ...