Vue 获取dom元素中的自定义属性值(带详细解释和自己理解)

方法一:

HTML

<div id="app"><button  @click="getData($event,'100','666','777')">点我</button>
</div>

methods : {getData(e,num,lalala,eee) {console.log(e);     // 输出 这个点击事件下面的所有属性console.log(num);     // 输出 100console.log(lalala);     // 输出 666console.log(eee);     // 输出 777//当然,我们还可以在后面加很多参数,但是你在methods获取时,一定要注意对应的值,如果丢失一个,可能打印获取的不是你那一个,可能是前面的一个值}
}

方法二:

HTML

<div id="app"><button data-lalala="666" ref="dataNum"  @click="getData($event)">点我</button>
</div>

methods : {getData (e) {console.log(this.$refs.dataNum.dataset.lalala);     // 输出 666//注意几点,第一,其实我们这里没有用到getData里面带的$event;//第二,看到ref时,是不是感觉很熟悉,就是表单认证里面的ref,在打印时,一定要加"s",变成refs;//第三,就是data-lalala,在methods里面,要写成dataset.lalala}
}

方法三:

HTML

<div id="app"><button data-lalala="666" @click="getData($event)">点我</button>
</div>

methods : {getData (e) {console.log(e.target.getAttribute('data-lalala'));     // 输出 666//这里,我们就用到了$event,打印内容大概为,event中目标指定属性名'data-lalala'的属性值。//(如果不是很了解,需要百度一下"target"和"getAttribute"的意思,event里面的属性很多,我们要用的那个,就调用对象的属性就好了)}
}

如果那里写的有问题,请麻烦留言指出,谢谢!!!

❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
❤如果喜欢比卡丘分享的文章，就给比卡丘点个关注吧！(๑′ᴗ‵๑)づ╭❤～
❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论(请勿发表攻击言论)

拿走,不用谢!!!送人玫瑰,手留余香

Vue 获取dom元素中的自定义属性值(带详细解释和自己理解)相关推荐

Vue 获取dom元素中的自定义属性值
方法一:通过绑定函数传参直接获取DOM元素自定义的值 <div id="app"><button @click="getData($event,'100 ...
Vue获取DOM元素并修改属性
Vue获取DOM元素 Vue获取DOM元素有两种方法直接给相应的元素加id,然后再使用document.getElementById("id");获取使用ref,给相应的元素加 ...
Vue 获取DOM元素，给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
八.vue获取dom元素
vue获取dom元素方法一:直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二:使用ref,给相应的元 ...
Vue笔记四：Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...
vue获取dom元素值
1.通过refs来获取dom元素内容 2.需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想通过refs方法 ref 被用来给元素或子组件注册引用信息.引用信息将会注 ...
vue获取dom元素注意问题
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this ...
ref 引用(vue获取DOM元素）
ref 引用 jquery 牛逼简化了程序员操作DOM的过程 vue 优势: MVVM 在 vue 中,程序员不需要操作DOM.只需要把数据维护好!(数据驱动视图) 结论:在 vue 项目,强烈不建 ...
vue获取dom元素与修改样式详解
vue中如何获取dom元素呢? 步骤详解在标签上加上ref属性如 : 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo 修改对应的样式名 ...

Vue 获取dom元素中的自定义属性值(带详细解释和自己理解)

Vue 获取dom元素中的自定义属性值(带详细解释和自己理解)相关推荐

最新文章

热门文章