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 ...
随机推荐
- 全文检索 使用最新lucene3.0.3+最新盘古分词 pangu2.4 .net 实例
开发环境 vs2015 winform 程序 1 首先需要下载对应的DLL 文章后面统一提供程序下载地址 里面都有 2 配置pangu的参数 也可以不配置 采用默认的即可 3 创建索引,将索引存放到本 ...
- igserver许可证过期 & 发布服务客户端浏览出现error2032
1.卸载igserver重装 卸载包IGServerForDotNet成功! 卸载包IGServerCore成功! 卸载包MiddleWare_ArcGIS成功! 卸载包SDE_DM成功! 卸载包SD ...
- VBA在Excel中的应用（三）
目录 Chart Export Chart Format Chart Lengend Chart Protect Chart Title Chart Chart Export 1. 将Exce ...
- [CSP-S模拟测试]:甜圈（线段树）
题目描述 $D$先生,是一个了不起的甜甜圈制造商.今天,他的厨房准备在日出之前制作甜甜圈.$D$先生瞬间完成了$N$个油炸圈饼.但是,这些油炸圈饼得先经过各种装饰任务才可以成为甜甜圈销售:填充奶油,浸 ...
- Selenium WebDriver 常用API
public class Demo1 { WebDriver driver; @BeforeMethod public void visit(){ //webdriver对象的声明 System.se ...
- Altium Designer chapter1总结
第一章操作基础中有以下几点需要注意: (1)随着DSP.ARM.FPGA等高速逻辑元件的应用,PCB的信号完整性与抗干扰性能显得尤为重要. (2)Altium Designer的发展史:Protel ...
- 2019/11/02 TZOJ
1001 ShaoLin http://www.tzcoder.cn/acmhome/problemdetail.do?&method=showdetail&id=6003 标记一下i ...
- MySQL 查询语句--------------进阶6：连接查询
#进阶6:连接查询 /* 含义:多个表格连接,当查询的字段来自于多个表时候,就会用到连接查询 我觉得这里类似于excel中的vlookup函数 笛卡尔乘积现象:表1有m行,表2有n行,结果有m*n行 ...
- 利用正则表达式模拟计算器进行字符串的计算实现eval()内置函数功能
代码感觉有点绕,刚开始学习python,相关知识点还没全部学习到,还请各位大神多多指教 import re # 定义乘法 def mul(string): mul1 = re.search('-?\d ...
- Robotframework使用自写库连接mysql数据库
Robotframework使用自写库连接mysql数据库 新建库文件mysqltest.py 代码如下: # -*- coding: utf-8 -*- import MySQLdbimport o ...