Vue框架——循环结构

循环结构

遍历数组

• v-for遍历数组

  <div id="app">
      <div>图书列表div>
      <ul>
          <li v-for="book in books">
              {
        {book}}
          li>
          
          <li v-for="(book, index) in books">
              {
        {index + "->" +book}}
          li>
      ul>
  div>
  

  var vm = new Vue({
         
      el: '#app',
      data: {
         
          books: ["天龙八部", "红楼梦", "西游记", "水浒传"]
      }
  });
  

  循环当中book为遍历项，index为索引值，books为数组，in为关键字
• v-for遍历复杂数组（数组中含有对象）

  <div id="app">
      <div>图书列表div>
      <ul>
          <li v-for="book in myBooks">
              <span>{
        {book.ename}}span>
              <span>->span>
              <span>{
        {book.cname}}span>
          li>
      ul>
  div>
  

  var vm = new Vue({
         
      el: '#app',
      data: {
         
          myBooks: [{
         
              ename: 'Tianlong eight',
              cname: '天龙八部'
          }, {
         
              ename: 'The Dream of Red Mansion',
              cname: '红楼梦'
          }, {
         
              ename: 'Journey to the West',
              cname: '西游记'
          }, {
         
              ename: 'Water Margin',
              cname: '水浒传'
          }]
      }
  });
  

• 为了提高性能，可以使用key关键字

   <li :key="index" v-for="(book, index) in myBooks">
       <span>{
        {book.ename}}span>
       <span>->span>
       <span>{
        {book.cname}}span>
  li>
  

  var vm = new Vue({
         
      el: '#app',
      data: {
         
          myBooks: [{
         
              ename: 'Tianlong eight',
              cname: '天龙八部'
          }, {
         
              ename: 'The Dream of Red Mansion',
              cname: '红楼梦'
          }, {
         
              ename: 'Journey to the West',
              cname: '西游记'
          }, {
         
              ename: 'Water Margin',
              cname: '水浒传'
          }]
      }
  });
  

  key关键字的作用：可以帮助Vue区分不同元素，从而达到提高性能的目的。给key赋的值在数组里必须是唯一的

遍历对象

• v-for遍历对象

  <div id="app">
      <ul>
          <li v-for="(value, key, index) in obj">
              {
        { index + '->' + key + ': ' + value }}
          li>
      ul>
  div>
  

  var vm = new Vue({
         
      el: '#app',
      data: {
         
          obj: {
         
              name: 'cmy',
              age: '21',
              gender: 'male'
          }
      },
  });
  

  遍历对象时，括号里必须有三个参数，分别是对象的值、键和索引，它们的顺序是固定的，命名却不是固定的
• v-if和v-for结合使用

  <div id="app">
      <ul>
          <li v-if="value==21" v-for="(value, key, index) in obj">
              {
        { index + '->' + key + ': ' + value }}
          li>
      ul>
  div>
  

  var vm = new Vue({
         
      el: '#app',
      data: {
         
          obj: {
         
              name: 'cmy',
              age: '21',
              gender: 'male'
          }
      },
  });