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'
          }
      },
  });