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: ...
随机推荐
- linux syslog.d日记操作记录-小节
以下记录在学习LDD3时调试处理打印的一些操作 syslog 不同的发行版,不同的脚本文件,如fedora18中为rsyslog的名称 1:配置文件 /etc/syslog.conf(fedora r ...
- Vue中插槽的使用
1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 . 2.分类:默认插槽.具名插槽.作用域插槽 3.使用方式: ①默认插槽 ...
- 【问题解决】RabbitMQ启动出现epmd error for host xx.xx: nxdomain (non-existing domain)
问题描述 [k8s]或[普通容器]或[Linux]部署的RabbitMQ启动时出现了 epmd error for host xx.xx: nxdomain (non-existing domain) ...
- 快速求popcount的和
前置知识 \(\text{popcount}(n)\) 表示将 \(n\) 转为二进制后的数中 \(1\) 的个数. 结论 \[\sum_{i=1}^{n} \text{ popcount}(i)=\ ...
- react之todoList基础小项目
1.项目最终成品和项目目录快照如图: 2.context.js文件 // 使用context进行多级传递数据 // 1. createContext 创建一个可以多级传递的context数据 // 2 ...
- 2020-09-06：Docker的命名空间有哪些？
福哥答案2020-09-06: 福哥口诀法:命进I网挂U用 1.进程命名空间.CLONE_NEWPID.进程编号. 2.IPC 命名空间.CLONE_NEWPIPC.信号量.消息队列何共享内存. 3. ...
- 2022-02-22：机器人大冒险。 力扣团队买了一个可编程机器人，机器人初始位置在原点(0, 0)。小伙伴事先给机器人输入一串指令command，机器人就会无限循环这条指令的步骤进行移动。指令有两种
2022-02-22:机器人大冒险. 力扣团队买了一个可编程机器人,机器人初始位置在原点(0, 0).小伙伴事先给机器人输入一串指令command,机器人就会无限循环这条指令的步骤进行移动.指令有两种 ...
- 2021-07-19：给定一个正数N，比如N = 13，在纸上把所有数都列出来如下： 1 2 3 4 5 6 7 8 9 10 11 12 13，可以数出1这个字符出现了6次，给定一个正数N，如果把1
2021-07-19:给定一个正数N,比如N = 13,在纸上把所有数都列出来如下: 1 2 3 4 5 6 7 8 9 10 11 12 13,可以数出1这个字符出现了6次,给定一个正数N,如果把1 ...
- C语言之环形队列
一.环形队列的优势 环形队列是一种特殊的队列,它可以解决普通队列在使用时空间利用不充分的问题.在环形队列中,当队列满时,队列的尾指针指向队列的起始位置,而不是指向队列的最后一个元素.这样可以在不浪费空 ...
- union()并集intersection()交集difference()差集
union并集,即:合并 intersection()交集 difference()差集 qs1=Course.objects.filter(price__get=240) qs2=Course.ob ...