vue事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div1{

                width: 300px;

                height: 300px;

                margin: 0 auto;

                background: skyblue;

            }

        </style>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <div class="div1" :style="{ background:color }" @click = 'changeColor($event,1)'>

            </div>

            <ul>

                <li v-for='(item,index) in list' @click='getIndex($event,index)' :data-index='index' >{{item}}</li>

            </ul>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    color:'skyblue',

                    list:[1,2,3,4]

                },

                methods:{

                    changeColor:function(e,index){

                        console.log(e)

                        console.log(index)

                        this.color = 'pink'

                    },

                    getIndex(e,index){

                        console.log(e)

                        console.log(index)

                        console.log(e.target.dataset.index)//这种事件传值的方式，可以适用任何地方

                    }

                }

            })

        </script>

    </body>

</html>

vue事件的更多相关文章

Vue—事件修饰符
Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...
vue 事件上加阻止冒泡阻止默认事件
重点 vue事件修饰符  <a v-on:click.stop="doThis"></a> <!-- 提 ...
vue事件监听机制
vue事件是同步的.如果绑定了事件(组件标签上绑定事件) 组件的事件触发组件调用时绑定事件之后监听事件: $emit 抛出后活等着 $on ,如果监听到了则阻塞执行: 如果为监听到或者未绑定,则会 ...
Vue 事件的基本使用与语法差异
"v-on:"可以简写为"@" "click"单击 "dblclick"双加代码: <!doctype html ...
Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
vue事件修饰符(once:prev:stop)
vue事件修饰符(once:prev:stop) stop修饰符效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...
Vue事件绑定原理
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...
Vue 事件的高级使用方法
Vue 事件的高级使用方法事件方法在Vue中提供了4中事件监听方法,分别是: $on(event: string | Array, fn) $emit(event: string) $once(e ...
Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
Vue 事件
一.事件冒泡方法一.使用event.cancelBubble = true来阻止冒泡 <div @click="show2()"> <input type=&q ...

随机推荐

深度汉化GCompris-qt，免费的幼儿识字软件
1 需求因为有个小孩上幼儿园了,想开始教他一些汉语拼音和基本的汉字,但通过一书本和卡片又有些枯燥乏味,于上就上网搜索一些辅助认字的应用,还购买了悟空识字APP,在用的过程中发现他设置了很严格的关卡, ...
css或Angular框架限制文本字数
提需求的来了某一期产品迭代时,新增了一个小功能,即:在单元格中的文本内容,字符超过20个字的时候,需要截断,并显示20个字符+一个省略号,未超过,无视. 这需求看上去不怎么复杂,看起来可以用css做 ...
Excel VBA入门（十）用户窗体开发
VBA 中的用户窗体就是指带 UI 的用户界面,在运行的时候会单独弹出一个窗口,类似于在 windows 系统中运行的一个可执行程序一样(这个说法不太严谨,因为可执行程序也可能是只有命令窗口而没有 U ...
Mysql的MyISAM和InnoDB存储引擎的区别
从以下几个方面: 1.存储结构每个MyISAM在磁盘上存储成三个文件.第一个文件的名字以表的名字开始,扩展名指出文件类型. .frm文件存储表定义. 数据文件的扩展名为.MYD (MYData). ...
Redis-->windows上的安装教程
Windows下安装Redis服务说明:本文拷贝自http://www.cnblogs.com/jaign/articles/7920588.html Redis是有名的NoSql数据库,一般Lin ...
Yii2.0怎么设置时区？
在config文件夹下,main.php 中, return [ 'charset' => 'utf-8', 'language' => 'zh-CN', 'timeZone' => ...
前端深入之css篇|你真的了解“权重”吗？
写在前面权重这个概念,相信对许多进行过前端开发的小伙伴来说肯定并不陌生,有时候一个样式添加不上,我们就会一个 !important 怼上去,一切就好像迎刃而解了.但还有的时候,!important也 ...
一文读懂Java GC原理和调优
概述本文介绍GC基础原理和理论,GC调优方法思路和方法,基于Hotspot jdk1.8,学习之后将了解如何对生产系统出现的GC问题进行排查解决阅读时长约30分钟,内容主要如下: GC基础原理,涉 ...
[UWP] 自定义一个ItemsPanel
在做游民星空的搜索页面的时候,需要展示搜索热点词,返回的是一个string数组的形式,然后以一种错落的方式显示,每一个Item的大小都和热点词长度一致,然后一行放不下之后就换行,描述的不太直观,直接看 ...
《Windows内核分析》专题-索引目录
该篇博客整理了<Windows内核分析>专题的各篇博文,方便查找. 一.保护模式二.进程与线程 [Windows内核分析]KPCR结构体介绍 (CPU控制区 Processor Cont ...

vue事件

vue事件的更多相关文章

随机推荐

热门专题