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. Mac 如何用python下载Mac OS

    ​ Python脚本下载 开源地址:macadmin-scripts 打开终端 : git clone https://github.com/munki/macadmin-scripts 下载inst ...

  2. 解决使用mapstruct过程中的一次编译报错问题_Internal error in the mapping processor

    说明 mapstruct版本:1.2.0.Final 开发工具:IntelliJ IDEA 2021.3.1 (Ultimate Edition) 报错现象 java: Internal error ...

  3. React Developer插件报错Cannot read properties of undefined (reading ‘forEach‘)

    安装了3.6的版本React Developer 启用插件后 报错 解决 https://www.crx4chrome.com/crx/3068/ 下载 下载好后,直接拖入扩展程序中

  4. java中的ConcurrentModificationException是什么异常？在哪些场景下会报该异常？

    在软件构造实验Lab2的ConcreteVerticesGraph里,需要我们编写remove()方法.移除一个点没有别的方法,只有遍历集合vertices(),找到该点并移除. 当时我没有写上红框中 ...

  5. 公司官网百度搜素优化（www.curetech.cc）

    1.  解读" 百度搜素引擎网页质量白皮书 "  . 链接:https://pan.baidu.com/s/1fD7Cm93qsK01M0K1M1cIKw 提取码:9krx 2.  ...

  6. OS-lab2

    OS-lab2 启动之后,我们的操作系统要能运行,需要一个载体,就是内存.内存的访问不是直接的,而是通过MMU完成.在完成MMU之前,我们先看看一些需要用到的宏定义和函数. include pmap. ...

  7. Python的入门学习Day 28~30——form”夜曲编程“

    Day 28 in Day 29 time: 2021.8.26. ​ 时间模糊了界限,虽我日渐走远.转眼而过的二十多天,既留下了夏天在沙滩上的足迹,同时也为黄金色的秋日铺上留白的画卷.键盘敲时,熟悉 ...

  8. 微信小程序中如何把数组从一个页面传到另一个页面，并且获取数据

    // 传送端 举例 wx.navigateTo({ url: 'recite/recite?openid=' + k.data.openid + '&isexist=' + k.data.is ...

  9. SQL Server 2012主从数据库的订阅和发布，实现数据库读写分离（主从备份）

    学习:https://www.bilibili.com/video/BV13B4y1h7Wu?p=12&spm_id_from=pageDriver&vd_source=3f21d2e ...

  10. (原创)odoo动态设置树形视图中的字段，每个用户可定制自己要显示的字段

    模块详情