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) 练习 ...
随机推荐
- sql建表添加注释的语句
官方自带的,我觉得麻烦,稍微'封装'一下 create proc Proc_AddExplian @table varchar(200), @clolum varchar(200), @text va ...
- milvus基础
nlist和nprobe nlist 是调用 create_index 时设置的参数,nprobe 则是调用 search 时设置的参数. IVFLAT 和 SQ8 索引都是通过聚类算法把大量的向量划 ...
- PHP 安装启用openssl（解决 wordpress可选的模组openssl未被安装或已被禁用）
本教程仅适用Windows Servier IIS网站服务器. 我的博客使用IIS搭建,相比Linux,相关的教程格外少.因此让以后的小伙伴也能马上解决问题,分享此方法. 首先需要下载php对应版本的 ...
- 前端学习openLayers配合vue3（修改地图样式）
这一块的东西非常简单,基于上一步的继续操作 关键代码,当然对应的对象需要进行相关的引入,为了方便理解,把背景色和边框放在了一起 //填充颜色 style:new Style({ fill:new Fi ...
- Bolt.new 30秒做了一个网站，还能自动部署，难道要吊打 Cursor？
大家好,我是汤师爷~ 这篇聊聊 Bolt.new 和 Cursor 的对比. Bolt.new 是一款基于 SaaS 的 AI 编码平台.它由 LLM 驱动的智能体作为底层,并结合 WebContai ...
- 监听sessionStorage中值的变化
应用场景:将登录接口所返回的用户信息存入sessionStorage,在其他地方需要使用到用户信息,但不知道什么时候接口请求完,此时可以监听sessionStorage中值的变化. 应用:Event自 ...
- Solution Set -「LOCAL」冲刺省选 Round XXIX
\(\mathscr{Summary}\) 啊--说老实话,早上昏昏欲睡的,起码浪费了一个多小时.比赛打麻了 qwq. A 题类似费用提前计算,回忆起这个 trick 之后就简单了.B 题又错 ...
- 使用iText对PDF文件签章和验章
PDF是国际板式文件标准,使用的范围很广.OFD为国产板式文件标准,设计起点很高,天然支持国产签名算法(SM2.SM3):具有后发优势,目前市场占有率仍然很低,前途光明而又漫长.PDF标准并不支持国产 ...
- uwp 获取屏幕分辨率
public static Size ScreenSize { get { //screen resolution var height = DisplayInformation.GetForCurr ...
- Hadoop 概述(三)
HDFS shell API HDFS作为大数据的文件系统,可以放置数据文件,列举几个常用的shell脚本命令,用法和linux中的基本类似,不过这个是hadoop里的一套,所以我们要用hadoop ...