腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用Vue.js v-for迭代一个数字变量？

问如何使用Vue.js v-for迭代一个数字变量？
EN

Stack Overflow用户

提问于 2016-07-25 09:02:10

回答 1查看 2K关注 0票数 3

例如，假设我有一个正整数变量rating。

文档http://vuejs.org/guide/list.html#Range-v-for只直接使用数字列出，但是为变量切换数字并不像预期的那样工作。

我目前正在这样做：

<i v-for="i in rating" class="fa fa-2x fa-star">{{ rating }}</i>

但不幸的是，它只显示了一次，即使通过评级值是4。文件里有遗漏什么吗？

javascript

vue.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-25 09:57:21

我知道问题是什么，我在via属性中传递评级值，所以它被作为字符串传入。请参阅此处的非工作示例：

<rating-component value="rating"></rating-component>

<rating-component :value="rating"></rating-component>

通过将value属性切换到:value，使用文字变量而不是字符串变量解决了我的问题。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38573611

复制

vue.js v-for

编程算法

v-for的核心在于；v-for="i in arr" i代表变量。arr代表数组。数组把值传给变量（一个一个传）

贵哥的编程之路

2021/03/02

6510

Vue.js入门笔记 v-for循环

编程算法

可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

Meng小羽

2019/12/24

1.2K0

cssjshtml vue.js v-for 过滤并排序

vue.js javascript

vue.js computed 利用逗号实现 vue.js 先排序再过滤，关键点在于:顺序不能为先过滤再排序。

葫芦

2019/04/17

1.8K0

9. Vue v-for指令的使用方式以及使用key解决组件问题

vue.js 渲染

在「vue」框架中，如果需要遍历渲染模板数据，那么就需要使用v-for命令，其中还有随之而来的「key」问题，下面来看看如何基本使用、以及问题解决！！

Devops海洋的渔夫

2022/01/17

1.7K0

13. Vue v-for指令的使用方式以及使用key解决组件问题

vue.js

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

Devops海洋的渔夫

2020/03/19

2K0

怎样监听vue.js中v-for全部渲染完成？

vue.js

vue里面本身带有两个回调函数：一个是Vue.nextTick(callback)，当数据发生变化，更新后执行回调。另一个是Vue.$nextTick(callback)，当dom发生变化，更新后执行的回调。栗子：... <ul id="demo"> <li v-for="item in list">{{item}}</div> </ul> ... new Vue({ el:'#demo', data:{ list=[0,1,2,3,4,5,6,7,8,9,1

hbbliyong

2018/04/18

3.3K0

Vue2.0中v-for迭代语法变化（key、index）

其他 http

大黄大黄大黄

2018/09/14

4410

Map映射如何使用迭代器？

java

迭代器只针对集合类型的数据，因此map类型的必须先转换成集合类型才能使用迭代器去获取元素。

孙晨c

2019/11/21

1.2K0

初始VUE

html 编程算法 vue.js javascript

vue.js是一种很流行的轻量级MVVM框架,那什么是MVVM架构呢？在这之前如果你了解后端框架，如laravel,thinkphp等等，他们的开发方式是MVC架构，何为MVC架构简单来说就是，将一个项目分成三层。 M(Model)层为模型层主要用于数据库操作，执行数据的CRUD。 C(Controller)层为控制层只要用于处理业务逻辑，在设计到数据操作时，会调用M层的相关方法 V(View)层就是视图层主要用于展示数据，用户交互等等。

切图仔

2022/09/08

8430

vue之v-for基本使用

bind push title 数据

<body> <div id="app"> <input type="button" value="添加数据" @click="add"> <input type="button" value="移除数据" @click="remove"> <ul> <li v-for="(item,index) in arr"> {{ index+1 }}一线城市：{{ item }}

兮动人

2021/06/11

5560

vue.js如何在标签属性中插入变量参数

javascript

html的标签的属性，比如id、class、href需要动态传递参数，拼接字符串，查了一些资料，并没有找到合适的解决方法，琢磨了一上午，终于试出了方法： v-bind:属性=“ ‘字符串’+自定义变量

hbbliyong

2018/03/29

8.8K0

前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器

mvc vue.js

一、条件渲染 1.1、v-if 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：  {{#if ok}} <h1>Yes</h1> {{/if}} 在 Vue.js ，我们使用 v-if 指令实现同样的功能： <h1 v-if="ok">Yes</h1> 也可以用 v-else 添加一个 “else” 块： <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> 1.1.1、template v-if 因为 v

张果

2018/03/30

3.3K0

javascript判断一个变量是否是数字

javascript

其实判断的是有两种需求的，一种是数字或者数字字符串，一种是数值类型，下面分别做一下介绍。

IT工作者

2021/12/28

1.8K0

JavaScript 中如何判断变量是否为数字

javascript 编程算法

JavaScript 是一种动态类型语言，这意味着解释器在运行时确定变量的类型。实际上，这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据。如果没有文档和一致性，我们在使用代码时并不总是知道变量的类型。

前端小智@大迁世界

2020/10/29

2.8K0

vue列表渲染

vue.js

Vue.js中最常用的列表渲染方式是使用v-for指令。这个指令可以根据一个数组或对象的数据源，循环渲染出多个元素。在每次循环迭代中，你可以访问当前迭代的元素和索引，并根据需要对它们进行操作。

堕落飞鸟

2023/05/21

7170

在Vue.js编写更好的v-for循环的6种技巧

vue.js

在 Vue.js 中，v-for 循环是每个项目都会使用的东西，它允许您在模板代码中编写for循环。

张张

2020/04/16

4K0

10天从入门到精通Vue(一)-vue基本概念和基础语法(v-text、v-bind、v-on、v-model等)

javascript 网站 vue.js mvc html

v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。v-html会解析文本中的html标签后展示。具体代码如下：

共饮一杯无

2022/11/28

1.4K0

10天从入门到精通Vue(一)-vue基本概念和基础语法(v-text、v-bind、v-on、v-model等)

使用v-for遍历数据

编程算法

遍历数组 let vm = new Vue({ el: "#app", data: { title: '金庸英雄', heros: ['乔峰', '段誉', '虚竹', '郭靖', '杨过'] } }) <ul class="list-group"> <li class="list-group-item" v-for="(value, key) in heros"> {{ key }} -- {{ value }} </

章鱼喵

2018/07/04

6000

如何使用FormKit构建Vue.Js表单

渲染表单工具工作开发

在本文中，我们将探讨使用FormKit的好处，并提供一个逐步指南，教你如何使用这个强大的工具构建表单。请继续阅读，了解FormKit如何帮助您简化表单构建过程，更快地构建更好的表单！

前端达人

2023/09/11

4500

v-for

编程算法

依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie

Qwe7

2022/05/27

2650

相似问题

如何使用v-for循环来使用Vue.js迭代列

如何使用v-for迭代元素

Vue.js :如何将v-for迭代到动态数组中

如何编写Vue.js v-for

如何使用v-for通过vue.js渲染表

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问如何使用Vue.js v-for迭代一个数字变量？
EN