vue事件

秒速五厘米 2021-12-20 01:15 194阅读 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 条评论，194人围观）

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

相关阅读

相关 Vue--事件总线

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

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

相关 vue事件处理器

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

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

相关【Vue】—事件处理

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

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

相关 vue事件处理

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

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

相关 vue @scroll 事件

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

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

相关 vue事件

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

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

相关 vue事件委托

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

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

相关 Vue事件处理

Vue事件处理监听事件事件处理方法内联处理器中的方法事件修饰符按键修饰符监听事件可以使用`v-on`监听DOM事件

谁践踏了优雅/ 2021年10月20日 00:46/ 0 赞/ 266 阅读

相关 Vue-事件处理器

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

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

相关 VUE 回车键事件

@keyup.enter.native="绑定事件 " 案例： HTML代码： <el-input v-model="nameQuery" placeh

古城微笑少年丶/ 2021年07月26日 02:58/ 0 赞/ 382 阅读