Vue.js 条件与循环

Vue.js 教程 · 2019-04-02 14:38:31

循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表:

v-for 指令

<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Codercto' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>

模板中使用 v-for:

v-for

<ul> <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> </ul>

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据:

v-for

<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '码农教程', url: 'http://www.codercto.com', slogan: '码农网 | 程序员? 码农? Hello, World!' } } }) </script>

你也可以提供第二个的参数为键名:

v-for

<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>

第三个参数为索引:

v-for

<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>

点击查看所有 Vue.js 教程 文章: https://www.codercto.com/courses/l/38.html

查看所有标签

机器学习及其应用2007

机器学习及其应用2007

周志华 编 / 清华大学 / 2007-10 / 37.00元

机器学习是人工智能的一个核心研究领域,也是近年来计算机科学中最活跃的研究分支之一。目前,机器学习技术不仅在计算机科学的众多领域中大显身手,还成为一些交叉学科的重要支撑技术。本书邀请相关领域的专家撰文,以综述的形式介绍机器学习中一些领域的研究进展。全书共分13章,内容涉及高维数据降维、特征选择、支持向量机、聚类、强化学习、半监督学习、复杂网络、异构数据、商空间、距离度量以及机器学习在自然语言处理中的......一起来看看 《机器学习及其应用2007》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具