(三)Vue.js v-for循环遍历 20170818

来源：互联网发布：stm32 压缩算法编辑：程序博客网时间：2024/05/21 04:20

一、v-for 遍历数组

jsp 代码

  <body>    <h2>v-for 循环语句</h2>    <ul id="vfor">    <template v-for="name in names">    <li>{{name.name}}</li>    <li>-------</li>    </template>    </ul>      </body>  <script type="text/javascript">  /*定义的数据 使用for循环去获取*/  new Vue({  el:"#vfor",  data:{    names:[  {name:'estar'},  {name:'TingPing'},  {name:'LiangXing'},  ]  }  });  </script>

结果图：

（二）v-for 遍历对象

1、遍历对象第一种写法

<div id="vforObject">    <ul>    <li v-for="object in objects">    {{object}}    </li>    </ul>    </div> /*定义的对象 使用for循环去获取*/  new Vue({  el:"#vforObject",  data:{     objects:{  name:'estar',  address:'TingPing',  desc:'深造于保险行业已经10之久'    }  }  });

结果图：

2、遍历对象第一种写法

<div id="vforObject">    <ul>    <li v-for="(value,key) in objects">    {{key}} : {{value}}    </li>    </ul>    </div> /*定义的对象 使用for循环去获取*/  new Vue({  el:"#vforObject",  data:{  objects:{  name:'estar',  address:'TingPing',  desc:'深造于保险行业已经10之久'  }  }  });

结果图

name : estaraddress : TingPingdesc : 深造于保险行业已经10之久

3、遍历集合中的对象

 <!-- v-for遍历集合 -->    <div id="vforList">    <template v-for="obj in objects">    <ul>    <li >    <label>姓名：{{obj.name}}</label><br/>    <label>地址：{{obj.address}}</label><br/>    <label>主要业务：{{obj.desc}}</label><br/>    </li>    </ul>    </template>    </div>/*编译数组中的集合*/  var v = new Vue({  el:"#vforList",  data:{  objects:[  {  name:'estar1-flx',  address:'广州市天河区中山大道89号华景软件园A栋10楼F区',  desc:'深造于保险行业已经10之久'  },  {  name:'estar2-flx',  address:'广州市天河区中山大道89号华景软件园A栋10楼F区',  desc:'深造于保险行业已经10之久'  },  {  name:'estar3-flx',  address:'广州市天河区中山大道89号华景软件园A栋10楼F区',  desc:'深造于保险行业已经10之久'  }  ]  }  });

结果图

姓名：estar1-flx
地址：广州市天河区中山大道89号华景软件园A栋10楼F区
主要业务：深造于保险行业已经10之久

姓名：estar2-flx
地址：广州市天河区中山大道89号华景软件园A栋10楼F区
主要业务：深造于保险行业已经10之久

姓名：estar3-flx
地址：广州市天河区中山大道89号华景软件园A栋10楼F区
主要业务：深造于保险行业已经10之久

阅读全文

0 0