vue事件

秒速五厘米 2021-12-20 01:15 224阅读 0赞

<!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>

转载于:https://www.cnblogs.com/wwthuanyu/p/10554842.html

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue事件

声明：本文主要是照着官网教学自己敲了一遍，纯属动手练习，没什么技术含量。 -------------------- 事件：事件监听(事件绑定)：使用v-on:监

系统管理员/ 2023年06月29日 10:53/ 0 赞/ 3 阅读

相关 Vue--事件总线

原文网址：[Vue--事件总线\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 [Vue事件总线（EventBus）使用详细介绍 - 知

电玩女神/ 2022年12月28日 06:20/ 0 赞/ 205 阅读

相关 vue事件处理器

vue事件处理器事件处理的时候，v-on,监听DOM事件，在运行的时候运行js的代码。事件监听：v-on <body> <div id="

梦里梦外;/ 2022年11月21日 09:53/ 0 赞/ 179 阅读

相关【Vue】—事件处理

【Vue】—事件处理 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

àì夳堔傛蜴生んèń/ 2022年09月03日 10:28/ 0 赞/ 159 阅读

相关 vue事件处理

1、监听事件： [详见Vue官网][Vue] 2、下拉框数据获取及改变： <div class="se"> <select v-model="

秒速五厘米/ 2022年05月27日 23:29/ 0 赞/ 187 阅读

相关 vue @scroll 事件

vue 的 scroll 事件做首页按需加载的时候滚动条滚动到底部之后加载由于如果绑定在window上，那么路由切换之后，事件依然会被触发，所以在div元素上绑定

一时失言乱红尘/ 2022年03月10日 13:28/ 0 赞/ 224 阅读

相关 vue 事件修饰符

> <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <m

朱雀/ 2022年02月21日 08:55/ 0 赞/ 320 阅读

相关 vue事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

秒速五厘米/ 2021年12月20日 01:15/ 0 赞/ 225 阅读

相关 vue事件委托

vue事件委托在vue中完成事件委托是非常方便的例如下面想要点击li标签输入每个li标签的数值 <ul> <li>1</li>

川长思鸟来/ 2021年12月11日 02:57/ 0 赞/ 449 阅读

相关 Vue-事件处理器

v-on指令计数器演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

谁借莪１个温暖的怀抱￠/ 2021年09月09日 08:28/ 0 赞/ 318 阅读