<!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事件的更多相关文章

  1. Vue—事件修饰符

    Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...

  2. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

  3. vue事件监听机制

    vue事件是同步的.如果绑定了事件(组件标签上绑定事件) 组件的事件触发 组件调用时绑定事件 之后监听事件: $emit 抛出后活等着 $on ,如果监听到了则阻塞执行: 如果为监听到或者未绑定,则会 ...

  4. Vue 事件的基本使用与语法差异

    "v-on:"可以简写为"@" "click"单击 "dblclick"双加 代码: <!doctype html ...

  5. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  6. vue事件修饰符(once:prev:stop)

    vue事件修饰符(once:prev:stop) stop修饰符  效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...

  7. Vue事件绑定原理

    Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...

  8. Vue 事件的高级使用方法

    Vue 事件的高级使用方法 事件方法 在Vue中提供了4中事件监听方法,分别是: $on(event: string | Array, fn) $emit(event: string) $once(e ...

  9. Vue - 事件绑定

    1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...

  10. Vue 事件

    一.事件冒泡 方法一.使用event.cancelBubble = true来阻止冒泡 <div @click="show2()"> <input type=&q ...

随机推荐

  1. tomcat设置指定jdk版本

    windows 1.解压下载的tomcat; 2.找到bin下的setclasspath.bat文件:在文件的开始出添加如下代码来设定JAVA_HOME和JRE_HOME的路径: set JAVA_H ...

  2. css 实现图片灰度

    先看效果鼠标移入图片中摁下向左移动 图片由灰度变为原图   向右移动原图变灰度 ​ 代码如下:尚未做优化 <style> *{ margin:0; padding:0; } #img{ w ...

  3. ng 图片的引用

    对于图片的引用有两种类型 本地 业务逻辑中(使用url) 本地中图片需要存放在静态资源夹assets中下新建的文件夹images文件夹中 eg:images文件夹中有一张01.png 的图片 显示本地 ...

  4. 防DOS攻击-网络连接法

    #!/bin/bash netstat -antup | grep SYN_RECV | awk '{print $5}' |awk -F: '{print $1}'|sort|uniq -c > ...

  5. 设计一个A表数据抽取到B表的抽取过程

    原题如下: 解题代码如下: table1类: @Data @NoArgsConstructor @AllArgsConstructor public class table1{ private Str ...

  6. tensorflow中添加L2正则化损失

    方法有几种,总结一下方便后面使用. 1. tensorflow自动维护一个tf.GraphKeys.WEIGHTS集合,手动在集合里面添加(tf.add_to_collection())想要进行正则化 ...

  7. 02 Pycharm的安装

    一.初试 在官网http://www.jetbrains.com/pycharm安装最新版本的pycharm软件,版本为 2019.2.3,根据网上教程发现安装不了,现在貌似还没破解,退而安装 201 ...

  8. 人生，还没困难到"非死不可"

    最近半个月,美国著名的Facebook公司,出了好几件大事.第一件事,2019年9月19日,一名陈姓中国软件工程师在Facebook加州总部跳楼自杀.第二件事,2019年10月4日,一名软件工程师在座 ...

  9. HTML基础知识（块级标签，行内标签，行内块标签）

    块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

  10. 用深度学习做命名实体识别(七)-CRF介绍

    还记得之前介绍过的命名实体识别系列文章吗,可以从句子中提取出人名.地址.公司等实体字段,当时只是简单提到了BERT+CRF模型,BERT已经在上一篇文章中介绍过了,本文将对CRF做一个基本的介绍.本文 ...