百变鹏仔-专注前端行业精选
vue中获取节点的两种方法,vue组件中通过mounted和操作dom获取节点操作的方法
作者:鹏仔先生 日期:2020-06-01 16:07:06 浏览:2651 分类:JavaScript
在使用VUE时,不能直接对节点直接进行操作,所以可能大家需要操作dom获取节点或者通过mounted来对节点进行操作,那么鹏仔给大家带来下面两个方法讲解
第一种:通过选择器来获取
template中代码
<template> <div> <canvas id='top' > </div> </template>
js代码
<script> export default{ mounted(){ let top = document.querySelector("#top"); } } </script>
之前,我们使用document.getElementById来获取id,在VUE中,我们需要使用 document.querySelector 来获取。
第二种:使用ref获取
template中代码
<template> <div> <canvas ref='top' > </div> </template>
js代码
<script> export default{ mounted(){ let canvas=this.$refs.top; } } </script>
猜你还喜欢
- 04-24 简单实现文字两端对齐
- 04-24 检测图片URL是否失效
- 04-24 elemetui中el-date-picker限制开始结束日期只能选择当月
- 04-24 iview中DatePicker时间段选择限制开始结束日期只能选择当月
- 03-24 vue h5实现车牌号输入框
- 11-01 vue中实现代码高亮
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 06-25 uniapp页面跳转的几种方式
取消回复欢迎 你 发表评论:
- 搜索
-
- 最新文章
- 随机文章
- 随机tag