热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

202177Vue的for使用实例

DOCTYPE html> {{item}} {{item.ename}}=={{index

技术分享图片技术分享图片

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

 


推荐阅读
author-avatar
黑暗中的数字
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有