vue学习一（指令3.v-on,v-for）
3.1.v-on 绑定事件 可以简写为@ ,按键修饰符 v-on:keyup = @keyup
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9
10 <body>
11 <script src="../node_modules/vue/dist/vue.js"></script>
12 <div id="app">
13 <!--v-on @可以字节操坐js片段-->
14 <button v-on:click="num++">点赞</button>
15 <button v-on:click="num--">取消</button>
16 <h1>有{{num}}个赞</h1>
17
18
19 <div style="border: 1px solid red;padding:20px" v-on:click="hello">
20 大div
21 <div style="border: 1px solid blue;padding:20px" @click.stop="hello">
22 小div<br/>
23 <a href="http://baidu.com" @click.prevent.stop="hello">去百度</a> <!--阻止默认事件发生 不会进去链接内容-->
24 </div>
25 </div>
26
27
28 <!--按键修饰符 @click.ctrl 单击+ctrl键-->
29 <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num+=10">
30
31 </div>
32
33 <script>
34 //v-on 绑定事件 可以简写为@
35 //1.按键修饰符 v-on:keyup
36 let vm = new Vue({
37 el:"#app",
38 data:{
39 num:1
40 },
41 methods: {
42 hello(){
43 alert("点击了");
44 }
45 },
46 })
47
48
49 /*事件修饰符：v-on提供了事件修饰符 修饰符是由点开头的指令后缀来表示的
50 1.`.stop` 阻止事件冒泡到父级
51 2.`.prevent` 阻止默认事件发生
52 3.`.capture` 组织事件捕获模式
53 4.`.self` 只有元素自身出发事件才执行（冒泡。捕获都不执行）
54 5.`.once` 只执行一次
55 */
56
57 //按键修饰符
58
59 </script>
60 </body>
61
62 </html>
3.2.v-for:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 </head>
8 <body>
9 <!--
10 1. 显示user信息 v-for="item in items"
11 2.获取数组下标：v-for="(item.index) in items
12 3.遍历对象：v-for="value in object"
13 v-for="（value.key in object"
14 v-for="value in object"
15
16
17 -->
18
19 <div id="app">
20 <ul>
21 <li v-for="(user,index) in users" :key="user.name" v-if="user.age>24">
22 当前索引{{index}} ==> {{user.name}} ==> {{user.gender}} ==> {{user.age}}
23
24 对象信息：
25 <span v-for="(v,k,i) in user">{{v}}=={{v}}=={{i}};</span>
26 <!--4.便利的时候加上：key来区分不同数据 提高vue渲染效率-->
27 </li>
28 </ul>
29
30 <ul> <!--在这里使用:key="index" 来区分不同的zhi -->
31 <li v-for="(num,index) in nums" :key="index">{{num}}</li>
32 </ul>
33 </div>
34 <script src="../node_modules/vue/dist/vue.js"></script>
35 <script>
36 let app = new Vue({
37 el:"#app",
38 data:{ //不能写成date了！！！！！！
39 users:[{name:'柳岩1',gender:'女1',age:21},
40 {name:'柳岩2',gender:'女2',age:22},
41 {name:'柳岩3',gender:'女3',age:23},
42 {name:'柳岩4',gender:'女4',age:24},
43 {name:'柳岩5',gender:'女5',age:25}],
44 nums:[1,2,3,4,4]
45 }
46 })
47 </script>
48 </body>
49 </html>
注：data:{ //不能写成date了！！！！！！
vue学习一（指令3.v-on,v-for）的更多相关文章
- Vue学习-基本指令
一.关于vue介绍:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe ...
- VUE学习-自定义指令
自定义指令 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. <div id="directive-demo"> <input ...
- vue学习之指令简写以及事件笔记
1.v-bind:××× 可简写为 :××× 2.v-on:××× 可简写为 @××× 例: v-on:click 可简写为 @click (官网文档介绍) 3.vue处理事件 <!-- 阻止单 ...
- vue学习笔记（一） ---- vue指令（总体大纲）
一.什么是Vue 官方文档:https://cn.vuejs.org/v2/guide/ 关键字: 渐进式框架 自底向上增量开发 视图层 单文件组件 复杂的单页应用 复杂的单页应用: 顾名思义,单页应 ...
- vue学习-day01（vue指令）
目录: 1.什么是vue.js 2.为什么要学习前端的流行框架 3.框架和库的区别 4.后端MVC和前端的MVVM的区别 5.vue.js的基本代码--hollo world代 ...
- 学习动态性能表(4)--v$sqltext&v$sqlarea
学习动态性能表 第四篇-(1)-V$SQLTEXT 2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...
- 学习动态性能表(14)--v$parameter&v$system_parameter
学习动态性能表 第14篇--V$PARAMETER&V$SYSTEM_PARAMETER 2007.6.11 这两个视图列出的各参数项名称以及参数值.V$PARAMETER显示执行查询的se ...
- vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- vue学习04 v-on指令
vue学习04 v-on指令 v-on的作用是为元素绑定事件,比如click单击,dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html l ...
- vue学习06 v-show指令
目录 vue学习06 v-show指令 v-show指令是:根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容,最终都会解析为布尔值(true和false) 练习 ...
随机推荐
- Qt编写的项目作品14-智能安防集中管理平台
一.功能特点 同时集成了楼宇对讲.住户报警.门禁控制.公共报警.视频监控等模块. 系统管理部分包括系统配置.对讲配置.住户配置.公共配置.监控配置.地图管理.视频联动.用户管理.区域管理. 图形化的实 ...
- 最近很新的EasyJailbreak😝 A Unified Framework for Jailbreaking Large Language Models🔅
整篇文章短小精悍,原文中的链接很有意思~大家去多多尝试哦!
- 使用Maven客户端从Maven中心仓库下载到本地的jar包的默认存储位置及远程仓库
从Maven中心仓库下载到本地的jar包的默认存放在"${user.home}/.m2/repository"中,${user.home}表示当前登录系统的用户目录(如" ...
- 记录一次线上服务OOM排查
外面,阳光明媚,一切正好. 就在我欢天喜地准备迎来愉快的双休时,忽然之间,天塌了. 刚上线一小时的服务内存异常OOM了! 老实说,在我印象里OOM问题只存在于网上案例中,练习编码时常两年半,还是第一次 ...
- .net core 用 identitymodel 请求token。
identitymodel 也有在Nuget里搜索和安装. identitymodel 扩展了HttpClient的一些方法用于token请求. 例如:client.RequestTokenAsyn ...
- Swagger介绍和应用
1.什么是swaggerSwagger是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的Web服务.简单来说,Swagger是一个功能强大的接口管理工具,并且提供了多种编程语言的 ...
- w3cschool-Hive 教程
https://www.w3cschool.cn/hive_manual/ 一.简述 HiveQL是一种声明式语言,用户提交查询,而Hive会将其转换成MapReduce job,如下图.一般来说大部 ...
- w3cschool-Apache Pig 教程
https://www.w3cschool.cn/apache_pig/ 什么是Apache Pig? Apache Pig是MapReduce的一个抽象.它是一个工具/平台,用于分析较大的数据集,并 ...
- SqlServer数据插入性能小记
对于SQL性能,已经很久没关注了.由于近期项目既没有几千万的海量数据也没有过多的性能要求,所以在性能上也就没下太多功夫.然而,前不久和朋友闲谈间话题一转就说到程序上了,他说他用Delphi做了个数据导 ...
- 类的加载与ClassLoader的理解
加载:将class文件字节码内容加载到内存中,并将这些静态数据转换成方法区的运行时数据结构,然后生成一个代表这个类的java.lang.Class对象,作为方法区中类数据的访问入口(即引用地址).所 ...