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) 练习 ...
随机推荐
- 记一次简单的存储过程和Pivot行转列
首先我很讨厌写存储过程,其次我很讨厌 没办法,主要是需要进行 行转列,项目经理说可以用Pivot.我不是很精通sql,但是我会百度呀~ pivot需要有确定的列名.那我这个项目里面没办法确定,最后问了 ...
- 概率论与数理统计教程（第二版，茆诗松，2010）PDF下载
概率论与数理统计教程(第二版,茆诗松,2010)PDF下载:共享地址
- PostgreSQL 数据库连接
title: PostgreSQL 数据库连接 date: 2024/12/29 updated: 2024/12/29 author: cmdragon excerpt: PostgreSQL是一款 ...
- 修改led-core.c 让led的delay_on和delay_off时间不会应为trigger配置改版而重置为1HZ
先列一下leds trigger的设置流程 echo none > trigger 的流程 led_trigger_set() | led_stop_software_blink() echo ...
- Excel函数公式大全(图文详解)
---------------------------- ----------------------------------------------------------------------- ...
- RocksDB-键值存储
存储和访问数百PB的数据是一个非常大的挑战,开源的RocksDB就是FaceBook开放的一种嵌入式.持久化存储.KV型且非常适用于fast storage的存储引擎. 传统的数据访问都是RPC, ...
- cmake-4
cmake-4学习,参考 cmake构建c++项目快速入门2-1 cmake构建c++项目快速入门2-2 了解 cmake的工作原理: Windows下用cmake编译cmake (1)先下载cmak ...
- win10 linux子系统的一些想法
什么是linux子系统 具体的概念网上很多,作为个技术人简单粗暴来说就是微软脑子瓦特,突然爱上了linux, 可以在win10安装linux子系统 子系统不同于虚拟机,但是其优点是安装很快,对于新手和 ...
- 独立看门狗IWDG
一.简介 STM32F10xxx内置两个看门狗(独立看门狗是12位递减计数器,窗口看门狗是7位递减计数器),提供了更高的安全性.时间的精确性和使用的灵活性.两个看门狗设备(独立看门狗和窗口看门 ...
- Win7下的文件权限
平常编写的程序总会有配置功能,然后配置肯定是以文本文件的方式存放在目录下.平常自己电脑测试没问题 发到客户那里总会有各种乱七八糟的状况 反映配置无法保存.先前早知道win7有管理员权限的机制,然后还刻 ...