Vue.js 循环语句 v-for指令

Vue.js循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
注意:

  • v-for循环的时候,key属性只能使用number或String。
  • key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值。
  • 在组件中使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的 字符串/数字 类型 :key值。
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  head>
<body>
  <div id='app'>
  	
    
    <p v-for="(item,index) in List">索引值---{{i}}   每一项---{{item}}p>
    <br/>
    
    <p v-for="(Obj,i) in ListObj">id---{{Obj.index}}   姓名---{{Obj.name}}p>
    <br/>
    
    <p v-for="(val,key) in User">键是---{{key}}  值是---{{val}}p>
    <br/>
    
    
    <p v-for="count in 10">第---{{count}}---次循环p>
  div>
body>
<script src="vue.min.js">script>

<script>
  var vm = new Vue({
    el:'#app',
    data:{
      List:[1,2,3],
      List_Obj:[
        {index:1, name:'Mr1'},
        {index:2, name:'Mr2'},
        {index:3, name:'Mr3'}
      ],
      User:{
        id:1,
        age: 20,
        name:'Vue指令',
        gender:'男'
      }
    }
  });
script>
html>

输出的结果参考

索引值--- 每一项---1

索引值--- 每一项---2

索引值--- 每一项---3



键是---id 值是---1

键是---age 值是---20

键是---name 值是---Vue指令

键是---gender 值是---男


第---1---次循环

第---2---次循环

第---3---次循环

你可能感兴趣的:(Vue,vue,vue.js,前端)