vue v-for直接循环数字实例

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" rel="external nofollow" ></use>
  <use v-else xlink:href="#ht-icon-xingxing1" rel="external nofollow" ></use>
</svg>

以上这篇vue v-for直接循环数字实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 实例分析vue循环列表动态数据的处理方法

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

  • vue改变循环遍历后的数据实例

    废话不多说了,直接上代码吧! <dd class="clearfix" v-for="(item,index) in tableDataList" :class="index%2 != 0 ? 'dd-bg' : ''"> <div class="indexItem indexItem3 tal" title=""><span>{{item.status}}{{count

  • 浅析vue中常见循环遍历指令的使用 v-for

    vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu

  • vue的for循环使用方法

    vue是一套当下非常受欢迎的构建用户界面的渐进式框架.那如何使用vue进行数据循环呢?下面的案例将使用v-for循环进行数据的遍历. 1.打开html开发工具,新建一个html 代码页面. 2.在新建的html代码页面创建一个<ul>标签同时给这个标签设置一个id为app,然后在<ul>里创建一个<li>标签. 代码: <ul id="app"> <li></li> </ul> 3.引入vue.js.在

  • vue v-for直接循环数字实例

    vue v-for直接循环数字,也就是固定次数 项目中需要做一个酒店星级,酒店星级就是固定的5星,根据后台返回的数据来显示几星级 <!--星级,循环固定次数 5次 根据酒店等级显示亮的星星和灰色的星星--> <svg class="icon" aria-hidden="true" v-for="index of 5" :key="index"> <use v-if="index <

  • vue 使用v-for进行循环的实例代码详解

    代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.n

  • vue实现移动端H5数字键盘组件使用详解

    本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码,供大家参考,具体内容如下 我们平时扫码付款的时候,经常会输入一些数字进行付款,仔细看了下键盘和系统的键盘有点不一样,于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个.话不多说,直接上代码. 结果如下: 代码如下: <template> <div class="keyboard-wrapper"> <input type="text" v-model="NUM

  • JavaScript校验Number(4,1)格式的数字实例代码

    项目里面有个录入,需要数字格式进行校验,前端使用的是miniUI框架,miniUI文档里面自带了校验,vtype="float",校验浮点数的,但是它不能做到校验这个浮点数有几位整数和几位小数,所以就有必要重写写一个js函数来校验: 实现思路: 1.获取所填写的值 2.判断是否为空,不为空执行3 3.对字符串trim()去空格,并且判断以"."开始或者结尾的都不是合法的数字,给出提示. 4.提前判断字符串是否是true或者false,因为下面要使用Number函数,

  • python 表达式和语句及for、while循环练习实例

    Python中表达式和语句及for.while循环练习 1)表达式 常用的表达式操作符: x + y, x - y x * y, x / y, x // y, x % y 逻辑运算: x or y, x and y, not x 成员关系运算: x in y, x not in y 对象实例测试: x is y, x not is y 比较运算: x < y, x > y, x <= y, x >= y, x == y, x != y 位运算: x | y, x & y,

  • 浅谈vue.js中v-for循环渲染

    浅谈vue.js中v-for循环渲染

    这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="

  • 随机生成10个不重复的0-100的数字(实例讲解)

    在面试时,面试官问了我一道js题:随机生成一个含有10个元素的数组,且元素为0-100的不重复的整数.当时的第一反应是for循环生成10个数字,但是可能会有重复的情况:进一步思考,需要对生成的数字进行验证才能放到数组里面,但是问题来了,如果恰好有重复的,那我之前for循环生成的10个数字就不够了.当时回答的不好,回来后再仔细思考一下,想出了2中解决方案,第一种其实是尝试过程中得出的,还是第二种比较好. 第一种: function random () { var arr = []; for (va

  • Vue中v-for的数据分组实例

    使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-for,那分组呢?这里需要用到vue的computed特性,将数据动态计算分组. 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • vue之浏览器存储方法封装实例

    如下所示: export function isObject (val) { return val !== null && typeof val === 'object' } export function setStore (key, val, type = 'localStorage') { if (isObject(val)) window[type].setItem(key, JSON.stringify(val)) else window[type].setItem(key, v

  • vue 实现的树形菜的实例代码

    下面一段代码给大家介绍vue 实现的树形菜单功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <l

随机推荐