Vue列表渲染

最新推荐文章于 2023-03-28 21:06:49 发布

Zdmzb

最新推荐文章于 2023-03-28 21:06:49 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/Zdmzb/article/details/105179682

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
   
   <ul>
    <li v-for="item in stars">
     {{item}}
    </li>
   </ul>
   <h2>学生列表</h2>
   <ul>
    <li v-for="item in students">
     <h4>姓名:{{item.studentName}}</h4>
     <p>年龄：{{item.age}}</p>
     <p>学校：{{item.school}}</p>
    </li>
   </ul>
   <h2>学生列表(带索引)</h2>
   <ul>
    <li v-for="item,key in students">
     <h4>索引值：{{key}}</h4>
     <h4>姓名:{{item.studentName}}</h4>
     <p>年龄：{{item.age}}</p>
     <p>学校：{{item.school}}</p>
    </li>
   </ul>
   <h4>循环对象</h4>
   <ul>
    <li v-for="item in students[0]">
     {{item}}
    </li>
   </ul>
   <h3>条件加循环（将偶数年龄学生渲染出来）</h3>
   <ol>
    <li v-for="item,index in students" v-if="item.age%2==0">
     <h4>姓名:{{item.studentName}}</h4>
     <p>年龄：{{item.age}}</p>
     <p>学校：{{item.school}}</p>
    </li>
   </ol>
  </div>
  <script type="text/javascript">
   var app=new Vue({
    el:"#app",
    data:{
     stars:["王菲","安琪","上官喜爱","谢可寅"],
     students:[
      {
       studentName:"小明",
       age:16,
       school:"武大"
      },
      {
       studentName:"小红",
       age:15,
       school:"浙大"
      },
      {
       studentName:"小画",
       age:18,
       school:"川大"
      }
     ],
     
    }
   })
  </script>
 </body>
</html>