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

<!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使用实例

 

posted @ 2021-07-07 21:49  月长生  阅读(35)  评论(0)    收藏  举报