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使用实例
2021-7-7 Vue的for使用实例的更多相关文章
- Vue中通过Vue.extend动态创建实例
Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...
- vue路由的简单实例
vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...
- Vue.2.0.5-Vue 实例
构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设 ...
- Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue单文件组件实例2：简单单文件组件
Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </templat ...
- Vue使用的一些实例
1.实现歌曲的点击切换. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Vue学习1：实例及生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 04: vue生命周期和实例属性和方法
1.4 组件的生命周期 1.说明 1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段, 2. 组件的生命周期:组件的创建过程 3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个 ...
- Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;
add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...
- Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)
官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...
随机推荐
- js与java对json的操作
JSON呢,是现在大部分,并且主流的传递数据的方式. 今天讲一下javascript的java对json的操作 提到js,当下就有一个比较主流的插件,vue.js,这个插件程序员没用过也都听说过吧, ...
- 全网最硬核 JVM 内存解析 - 1.从 Native Memory Tracking 说起
个人创作公约:本人声明创作的所有文章皆为自己原创,如果有参考任何文章的地方,会标注出来,如果有疏漏,欢迎大家批判.如果大家发现网上有抄袭本文章的,欢迎举报,并且积极向这个 github 仓库 提交 i ...
- PHP获取网页返回的JSON数据并在微信换行展示
1 $url ="http://japi.juhe.cn/joke/content/text.from?page=&pagesize=&key=c968d04ab0ea15e ...
- 2022-06-24：golang选择题，以下golang代码输出什么？A：1；B：3；C：4；D：编译失败。 package main import ( “fmt“ ) func mai
2022-06-24:golang选择题,以下golang代码输出什么?A:1:B:3:C:4:D:编译失败. package main import ( "fmt" ) func ...
- 基于Gazebo搭建移动机器人，并结合SLAM系统完成定位和建图仿真
博客地址:https://www.cnblogs.com/zylyehuo/ gazebo小车模型创建及仿真详见之前博客 gazebo小车模型(附带仿真环境) - zylyehuo - 博客园 gaz ...
- Django4全栈进阶之路21 项目实战（在线报修）：创建App应用和Model模型
创建应用App python manage.py startapp RepairApp 创建模型 在models.py文件中定义一个Repair模型来表示报修单,其中包含以下字段: repair_id ...
- linux中使用jenkins自动部署前端工程
1.去年在自己的服务器上安装了jenkins,说用来自己研究一下jenkins自动化部署前端项目,jenkins安装好了,可是一直没管,最近终于研究了一下使用jenkins自动化部署,以此记录下来. ...
- vue使用iframe嵌入html，js方法互调
前段时间 使用h5搞了个用cesium.js做的地图服务功能,后来想整合到vue项目,当然最简单的就是iframe直接拿来用了. 但html和vue的方法交互就是成了问题,vue调用html种方法还好 ...
- LeetCode 周赛 347（2023/05/28）二维空间上的 LIS 最长递增子序列问题
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 往期回顾:LeetCode 单周赛第 346 场 · 仅 68 人 AK 的最短路问题 周赛 347 概览 ...
- MySQL全面瓦解30：备份与恢复
合辑地址:MySQL全面瓦解 1 为什么需要数据库备份 灾难恢复:当发生数据灾难的时候,需要对损坏的数据进行恢复和还原 需求的变更或者回滚:当需求发生变更,或者需要回滚到之前的版本时,数据库备份也显得 ...