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: ...
随机推荐
- XMake学习笔记（1）：Windows（MSYS2）下MinGW-w64环境搭建和XMake安装
以前写的C++基本都是C with STL,大多是面向过程的算法题,或者比较小的项目,然后经常报各种编译错误(对编译原理不熟),经常把人搞到崩溃,搞不懂构建.链接之类的东西. 现在开始记录一下XMak ...
- 2022-10-18：以下go语言代码输出什么？A：panic；B：编译错误；C：moonfdd1。 package main import ( “fmt“ “net/url“ ) // 其中
2022-10-18:以下go语言代码输出什么?A:panic:B:编译错误:C:moonfdd1. package main import ( "fmt" "net/u ...
- 2022-01-10：路径交叉。给你一个整数数组 distance 。 从 X-Y 平面上的点 (0,0) 开始，先向北移动 distance[0] 米，然后向西移动 distance[1] 米，向南
2022-01-10:路径交叉.给你一个整数数组 distance . 从 X-Y 平面上的点 (0,0) 开始,先向北移动 distance[0] 米,然后向西移动 distance[1] 米,向南 ...
- Rust如何引入源码作为依赖
问题描述 通常我们在rust项目中引入第三方依赖包时,会直接指定包的版本,这种方式指定后,Cargo在编译时会从crates.io这个源中下载这些依赖包. [package] name = " ...
- Django4全栈进阶之路23 项目实战（报修类型表）：应用程序命名空间app_name和分页组件paginator
1.应用程序命名空间app_name from django.urls import path from . import views from .views import RepairDetailV ...
- django安装依赖包报错No such file or directory: 'requirement.txt'和警告You are using pip version 22.0.4; however, version 23.0.1 is available.
ERROR: Could not open requirements file: [Errno 2] No such file or directory: 'requirement.txt'WARNI ...
- 【C++】初始化列表构造函数VS普通构造函数
普通构造函数VS初始化列表构造函数 初始化列表构造函数最优先匹配问题 对于一个类而言,只要其中包含有初始化列表的构造函数,编译器在编译使用{}语法的构造时会最倾向于调用初始化列表构造函数,哪怕做类型转 ...
- 什么是DOM和BOM？
DOM:文档对象模型,描述了处理网页内容的方法和接口.最根本对象是document 由于DOM的操作对象是文档,所以DOM和浏览器没有直接关系 BOM:浏览器对象模型,描述了与浏览器进行交互的方法和接 ...
- 【故障公告】博客站点一台阿里云负载均衡被DDoS攻击
13:06 收到阿里云的电话与邮件通知,博客站点的一台阿里云负载均衡因被 DDoS 攻击被关进黑洞(所有访问被屏蔽),部分用户的访问受影响,由此给您带来麻烦,请您谅解. 您的IP:x.x.x.x 实例 ...
- 啊哈C语言案例学习笔记
Hello World #include<stdio.h> /* 技术要点: 初学者在编写程序时,经常会忘记在语句后边添加分号, */ int main() { printf(" ...