Vue.js DOM操作

kyaa111 4年前 ⋅ 979 阅读
<template>
     <input type="button" @click="reply($event)" value="回复">
</template>

	export default {
         methods: {
         	 replyFun(e) {
             	// e.target 是当前点击的元素
				// e.currentTarget 是绑定事件的元素
    			//获得点击元素的前一个元素
    			e.currentTarget.previousElementSibling
    			//获得点击元素的第一个子元素
    			e.currentTarget.firstElementChild
    			// 获得点击元素的下一个元素
                e.currentTarget.nextElementSibling
                // 获得点击元素中id为test的元素
                e.currentTarget.getElementById("test")
                // 获得点击元素的test属性
                e.currentTarget.getAttributeNode('test')
                // 获得点击元素的父级元素
                e.currentTarget.parentElement
                // 获得点击元素的前一个元素的第一个子元素的HTML值
                e.currentTarget.previousElementSibling.firstElementChild.innerHTML
             }
         }
    }