首页 > 其他 > 详细

2021-7-7 Vue的for使用实例

时间:2021-07-08 00:14:06      阅读:23      评论:0      收藏:0      [点我收藏+]
技术分享图片
<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
    <ol>
        <li v-for="item in fruit">{{item}}</li>
        <li v-for="(item,index) in myClass">{{item.ename}}=={{index}}=={{item.cname}}</li>
    </ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
  el: #app,
  data: {
    fruit:[apple,banana,orange],
    myClass:[{ename:apple,cname:苹果},{ename:banana,cname:香蕉},{ename:orange,cname:橘子},]
  }
})
</script>
</body>
</html>
Vue的for

 加上v-bind:key="index(或者id)"可以调高vue的性能

技术分享图片
<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
    <ol>
        <li v-for="(item,key,index) in obj">{{key}}=={{index}}=={{item}}</li>
    </ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
//在原生js中使用
var obj={
    name:张三,
    age:18,
    gender:male
}
for (var key in obj) {
    console.log(key,obj[key]);
}
new Vue({
  el: #app,
  data: {
       obj
  }
})
</script>
</body>
</html>
Vue的key使用实例

 

2021-7-7 Vue的for使用实例

原文:https://www.cnblogs.com/WH5212/p/14983777.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!