Vue.js框架--自定义方法和事件的使用（五）

傷城~ 2024-02-18 23:25 16阅读 0赞

**主要操作技能：**

自定义方法的使用:有参数，无参数；

事件的使用 $event ===>e.srcElement.dataset

自定义属性：data- 如： data-aid ,data-uname

![70][] 单击按钮，触发的事件

![70 1][]

![70 2][]![70 3][]

**编写代码：**

<template>
    	<div id="app">
    
         {
       {msg}}<br />
    		<button v-on:click="run1()">执行第一种方法</button><br /><br />
    		<button @click="run2()">执行第二种方法</button><br /><br />
    		<button @click="getData()">获取get数据</button><br /><br />
    		<button @click="setData()">设置set数据</button><br /><br />
    		<button @click="requestData()">请求数据</button><br /><br />
    		
    		<ul>
    			 
    				<li v-for="(item,key) in list">
    				{
       {key}} -- {
       {item}}
    			</li>
    		</ul>
    		<br /><br />
    		<button @click="exeData('qq')">执行方法传值qq</button><br /><br />
    		<button @click="exeData('888')">执行方法传值888</button><br /><br />
    		<button data-aid="888" data-uname="your" @click="eventData($event)">事件对象</button><br /><br />
        
    	</div>
    </template>
    
    <script> 
    	export default {
    		name: 'app',
    		data() { //业务逻辑的数据
    			return {
    				msg: 'hello',
    				list:[]  //声明数组
    			}
    		},
    		methods: {
    			run1: function() {
    				alert("this is a first method!");
    			},
    			run2(){  //可以省略：function()哦！
    				alert("second method!");
    			},
    			getData(){
    				alert(this.msg);
    			},
    			setData(){
    				this.msg="修改后的数据!";
    			},
    			requestData(){				
    				 for(var i=1;i<11;i++){
    				 	//添加数据
    				 	this.list.push("第"+i+"个数据!");
    				 }
    			},
    			exeData(vx){ //传入参数值
    				 alert(vx);
    			},
    			eventData(e){ //事件对象 
    				 console.log(e);  //控制台输出
    				 
    				 //srcElement 当前button，dom节点
    				 e.srcElement.style.background="blue";
    				 
    				 //获取自定义属性的值
    //				 console.log(e.srcElement.dataset) 
    				 console.log(e.srcElement.dataset.aid) 
    
    			}
    		}
    
    	}
    </script>

**效果：**

![70 4][]

![70 5][]

![70 6][]

![70 7][]

![70 8][]

![70 9][]

![70 10][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cd5b2c8717c843cb934e7dac6786417c.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0f5a3767b69a41f38a42d96590b1ef46.png
[70 2]: https://img-blog.csdn.net/20180829143434557?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5c85bca45a374d14b6e13be972632d6b.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5e471521fa6941e08490594513de186e.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6457b38bd5224320b4e931eac6c4de80.png
[70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b516e3d5d27a446fafd26001b9739e20.png
[70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/966b92c96ad54667a6d25281549e7f81.png
[70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f9b204e979114524ab511741774f7419.png
[70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cea63e018d1348a188b76b3dbd011508.png
[70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1113f01c63654c1b8f67a9e62f525bb4.png