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: ...
随机推荐
- 从原理聊JVM（三）：详解现代垃圾回收器Shenandoah和ZGC
作者:京东科技 康志兴 Shenandoah Shenandoah一词来自于印第安语,十九世纪四十年代有一首著名的航海歌曲在水手中广为流传,讲述一位年轻富商爱上印第安酋长Shenandoah的女儿的故 ...
- vue移动端预览 pdf 文件
pdf预览,在项目中是很常见的需求,在PC端web项目中,我们可以使用window.open(url)直接打开pdf进行预览,那么移动端虽然我们也可以使用此方法,但是这是新开了一个webview页面, ...
- [Pytorch框架] 2.1.2 使用PyTorch计算梯度数值
文章目录 使用PyTorch计算梯度数值 Autograd 简单的自动求导 复杂的自动求导 Autograd 过程解析 扩展Autograd import torch torch.__version_ ...
- cryptohack wp day(4)
接上题 第五题(Modular Inverting) 在模运算中,如果我们要解决形如a * x ≡ b mod m的方程,其中a,b,m是已知整数,x是未知整数,我们可以使用扩展欧几里得算法来找到x的 ...
- SQL Server 2005递归查询
WHIT XXX(列1,列2....) AS ( SELECT 列1,列2... FROM 表WHERE ID=xxxxxx UNION ALL SELECT 列1,列2.... FROM 表 WHE ...
- Nuxt3.0中使用EChart可视化图表📊
在Nuxt3.0项目中用到了可视化图表,于是我用了EChart可视化图表库.但是在官网我没有找到针对在Nuxt3.0中使用EChart的方法,于是在这里记录我的引入EChart并简单使用的步骤.需要声 ...
- 2022-02-27：k8s安装yapi，yaml如何写？
2022-02-27:k8s安装yapi,yaml如何写? 答案2022-02-27: yaml如下: apiVersion: apps/v1 kind: Deployment metadata: l ...
- vue全家桶进阶之路11：计算属性
Vue2 中的计算属性是指在组件中声明的计算属性,它们的值是根据其他数据计算得出的,并且会根据依赖数据的变化而自动更新.计算属性可以在模板中使用,与普通属性一样使用,但是它们具有以下优点: 缓存:计算 ...
- Hugging News #0519: 我们把 HuggingChat 开源了
每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...
- INFINI Labs 产品更新 | Console 新增数据比对、新增数据看板表格组件及支持下钻功能等
INFINI Labs 产品更新啦~,本次产品版本更新包括 Gateway v1.14.0.Console v1.2.0.Easysearch v1.1.1 等,其中 Console 在上一版基础上做 ...