在vue中获取dom元素

在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而操作该dom元素，以下是个例子，可以当做参考

<template><div><div id="box" ref="mybox">DEMO</div></div>
</template><script>
export default {data () {return {invt:''}},mounted () {this.init();},destroyed () {clearTimeout(this.invt);},methods:{init() {this.$refs.mybox.style.color = 'red';this.invt = setTimeout(() => {this.$refs.mybox.style.color = 'blue';}, 1000)}}}
</script><style scoped>#box {width: 100px;height: 100px;line-height: 100px;font-size: 20px;text-align: center;border: 1px solid black;margin: 50px; color: yellow;}
</style>

在vue中获取dom元素相关推荐

Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
在Vue中获取DOM元素的实际宽高
最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素在 Vue 中可以 ...
vue.js -- 获取dom元素的样式(非行内样式)
在vue中获取dom元素的样式: this.$refs.menuList.style.top; 这种获取方式是只能获取到元素的行内样式的. this.$refs.menuList.getBoundin ...
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
js中获取dom元素高度
目录 1.dom元素的宽高 2.鼠标事件中的常用高度宽度: 3. 总结: 4.参考博客: 1.dom元素的宽高 javascript中获取dom元素高度和宽度的方法如下: 网页可视区域宽: docum ...
vue 获取id元素_.vue组件中获取DOM元素问题
一.问题引入原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用document.getElementById('id')改为ref获取元素的形式. ...
在vue3setup语法糖中获取DOM元素
1.给dom元素添加ref <a-form v-if="modalTitle==='新建指标'" :model="addForm" :rules=&quo ...
vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了但有一个问题我很纳闷就是你说下vue中获取dom元素的方法吧我说大体上俩中吧 1.vue中 ref的方法给元素起一个ref名称通过 th ...
Vue.js实例学习：获取DOM元素
一.获取DOM元素在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中写上:ref="xxx" (2)通过组件对象 t ...

在vue中获取dom元素

在vue中获取dom元素相关推荐

最新文章

热门文章