池州小程序开发报价单_Vue.js常用指令之循环使用

2021-01-11 16:47 jianzhan
Vue.js常用指令之循环使用v-for指令教程     投稿:daisy   这篇文章主要跟大家介绍了关于Vue.js常用指令之循环使用v-for指令的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

前言

Vue.js中,v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。

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

 div id="wantuizhijia" 
 li v-for="site in sites" 
 {{ site.name }}
 /li 
 /ol 
 /div 
 script 
 new Vue({
 el: '#wantuizhijia',
 data: {
 sites: [
 { name: '网推之家' },
 { name: '谷歌' },
 { name: '淘宝' }
 /script 

输出:

模板中使用 v-for:

 div id="wantuizhijia" 
 template v-for="place in places" 
 li {{ place.name }} /li 
 li -------------- /li 
 /template 
 /ul 
 /div 
 script 
 new Vue({
 el: '#wantuizhijia',
 data: {
 places: [
 { name: '厦门' },
 { name: '漳州' },
 { name: '福州' }
 /script 

效果:

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

 div id="wangtuizhijia" 
 li v-for="value in object" 
 {{ value }}
 /li 
 /ul 
 /div 
 script 
 new Vue({
 el: '#wangtuizhijia',
 data: {
 object: {
 name: '凡科',
 url: 'script 

效果:

凡科

p>

 div id="wangtuizhijia" 
 li v-for="(value, key) in object" 
 {{ key }} : {{ value }}
 /li 
 /ul 
 /div 
 script 
 new Vue({
 el: '#wangtuizhijia',
 data: {
 object: {
 name: '凡科',
 url: 'script 

效果:

name : 凡科

url : p>

 div id="wangtuizhijia" 
 li v-for="(value, key, index) in object" 
 {{ index }} {{ key }}:{{ value }}
 /li 
 /ul 
 /div 
 script 
 new Vue({
 el: '#wangtuizhijia',
 data: {
 object: {
 name: '凡科',
 url: 'script 

效果:

0 name:凡科

1 url:p>

 div id=”wangtuizhijia” 
 li v-for=”n in 10″ 
{{ n }}
 /li 
 /ul 
 /div 
 script 
new Vue({
el: ‘#wangtuizhijia'
 /script 
 /body 

效果:

10

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对凡科的支持。