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

最新推荐文章于 2024-07-20 18:39:05 发布

凌冰_

最新推荐文章于 2024-07-20 18:39:05 发布

阅读量718

点赞数 1

分类专栏： Vue.JS

本文链接：https://blog.csdn.net/hlx20080808/article/details/82182582

版权

Vue.JS 专栏收录该内容

41 篇文章 4 订阅

订阅专栏

主要操作技能：

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

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

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

单击按钮，触发的事件

编写代码：

<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 in list">--> <!--循环数据-->
				<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>

效果：