Vue列表渲染:一个取值范围的v-for
v-for 也可以取整数。在这种情况下，它将重复多次模板。
例子
<div id="app">
<span v-for="n in 10">{{ n }}</span>
</div>
<script>
new Vue({
el:"#app",
})
</script>
浏览器打开显示
如果想对这10个数进行过滤呢(只要偶数)
我们可以创建返回过滤的计算属性。
<html>
<head>
<title>Canvas tutorial</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="n in evenNumber">{{ n }}</span>
</div>
<script>
new Vue({
el:"#app",
data:{
numbers:[1,2,3,4,5,6,7,8,9,10]
},
computed:{
evenNumber:function(){
return this.numbers.filter(function(number){
return number % 2 === 0;
})
}
}
}) </script>
</body>
</html>
浏览器显示:
我们也可以用methods方法来写
<html>
<head>
<title>Canvas tutorial</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="n in evenNumber(evenNumber)">{{ n }}</span>
</div>
<script>
new Vue({
el:"#app",
data:{
numbers:[1,2,3,4,5,6,7,8,9,10]
},
methods:{
evenNumber:function(){
return this.numbers.filter(function(number){
return number % 2 === 0;
})
}
}
})
</script>
</body>
</html>
Vue列表渲染:一个取值范围的v-for的更多相关文章
- Vue 列表渲染及条件渲染实战
条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...
- Vue 列表渲染中的key
首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...
- Vue.js高效前端开发 • 【Vue列表渲染】
全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- Vue列表渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...
- Vue入门系列（三）之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- 14 Vue列表渲染
列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...
- vue 列表渲染 v-for
1.数组列表 v-for 块中,我们拥有对父作用域属性的完全访问权限.v-for 还支持一个可选的第二个参数为当前项的索引 1.1 普通渲染 v-for="item ...
- vue 列表渲染 v-for循环
v-for循环指令类似与html中C标签的循环,同样可以遍历数组,集合. 1.这里演示一下遍历数组的基本用法,代码如下 <!DOCTYPE html> <html> <h ...
随机推荐
- 基于Nginx和uWSGI在Ubuntu上部署Django项目
前言: 对于做Django web项目的童鞋,重要性不言而喻. 参考:https://www.cnblogs.com/alwaysInMe/p/9096565.html https://blog.cs ...
- CF286E Ladies' Shop FFT
题目链接 读完题后,我们发现如下性质: 在合法且和不超过 $m$ 的情况下,如果 $a_{i}$ 出现,则 $a_{i}$ 的倍数也必出现. 所以如果合法,只要对所有数两两结合一次就能得到所有 $a_ ...
- [luogu]P1168 中位数[堆]
[luogu]P1168 中位数 题目描述 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[3], …, A[2k - 1]的中位数.即前1 ...
- Cluster基础(五)：配置tracker、配置storage、文件测试及web访问
一.配置tracker 目标: FastDFS是一个分布式文件系统,主要的服务器角色有Tracker和Storage.本例安装一台Tracker,实现以下功能: 接受客户端的访问 检索存储节点,为客户 ...
- 二叉搜索树第k个节点
/* struct TreeNode { int val; struct TreeNode *left; struct TreeNode *right; TreeNode(int x) : val(x ...
- 20180822-Java接口
Java 接口 接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并 ...
- Jesus Is Here
Jesus Is Here Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 65535/102400 K (Java/Others)To ...
- HDU 3605 Escape（二分图多重匹配问题）
Escape Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Subm ...
- vue项目运行时出现的问题（less、vue poackages version）
今天运行项目,项目一直好好的却突然运行时报错,如下: 是引入文件报错问题,回头查看了一下文件在main.js的引入: import '@/assets/styles/custom.less'; 文件引 ...
- DataFrame API应用案例
DataFrame API 1.collect与collectAsList . collect返回一个数组,包含DataFrame中的全部Rows collectAsList返回一个Java List ...