04 Vue事件 请求数据 执行方法传值 以及事件对象

请求数据

实例：
template:

<template>
  <div id="app">
		<ul>
			<li v-for="(item,key) in list">
				{{key}}===== {{item}}
			</li>
		</ul>
 </div>
</template>

js:

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: '你好！',
      list: []
    }
  },
  methods:{
	requestData() {
		for(var i = 0; i < 5; i++) {
			this.list.push('我是第'+ i + '条数据！');
		}
	},
  }
}
</script>

运行效果：

执行方法传值

template:

<template>
  <div id="app">
	<button @click="deleteData('yuanjianfen')">执行方法传值</button>
 </div>
</template>

js：

<script>
	export default {
		name: 'app',
		methods: {
			deleteData(val) {
				alert(val);
			},
		}
	}
</script>

运行效果如下：

事件对象

template:

<template>
  <div id="app">
		<button @click="eventFn($event)">事件对象</button>
 </div>
</template>

js:

<script>
	export default {
		name: 'app',
		methods: {
			eventFn(e) {
				console.log(e);
				// e.srcElement	dom节点
				e.srcElement.style.background = 'red';
				// 获取自定义属性的值
				console.log(e.srcElement.innerHTML);
			}
		}
	}
</script>

运行效果如图：

完整代码

template:

<template>
	<div id="app">
		<ul>
			<li v-for="(item,key) in list">
				{{key}}===== {{item}}
			</li>
		</ul>
		<button v-on:click="requestData()">请求数据</button>
		<button @click="deleteData('yuanjianfen')">执行方法传值</button>
		<button @click="eventFn($event)">事件对象</button>
	</div>
</template>

js:

<script>
	export default {
		name: 'app',
		data() {
			return {
				msg: '你好！',
				list: []
			}
		},
		methods: {
			requestData() {
				for (var i = 0; i < 5; i++) {
					this.list.push('我是第' + i + '条数据！');
				}
			},
			deleteData(val) {
				alert(val);
			},
			eventFn(e) {
				console.log(e);
				// e.srcElement	dom节点
				e.srcElement.style.background = 'red';
				// 获取自定义属性的值
				console.log(e.srcElement.innerHTML);
			}
		}
	}
</script>