这几天我远程面试了一家公司,期间问题我都回答上来了 但有一个问题我很纳闷
就是你说下vue中获取dom元素的方法吧
我说大体上俩中吧 1.vue中 ref的方法 给元素起一个ref名称 通过 this.$refs.ref名称获取
2.第二个无非是 原生dom操作了 document.getElement // document.querySelector 等等
人家说 如果是 从后台渲染的 动态元素呢 我说 上面的我说的方法不行吗
人家说 不是我想要的 我说那这种情况我没见过 然后就过去了
我特意做了一个简单的小demo 毕竟以前也搞过
<div id="app">
<ul>
// 给每一个 li 元素起一个 ref名字 和 id的数值
<li :ref="'s'+index" v-for="(item,index) in array" :key="index" :id="'s'+index">
hello world {{item}}=====<button>删除</button>
</li>
</ul>
</div>
var app=new Vue({
el:'#app',
data:{
array:[1,2,3,4,5,6,7] // 动态模拟渲染数据
},
mounted(){
var dom1=document.querySelector('#s0');
dom1.style.color="#f00"
console.log('mount钩子函数',dom1,this.$refs.s1); // this.$refs.s1 获取的是一个存取dom元素数组
this.$refs.s1[0].style.color="red" // 第一个就是我们想要的元素
},
created(){
var dom1=document.querySelector('#s2');
console.log('created钩子函数',dom1);
}
})
最后页面上都实现 dom样式的改变 最好在 mountd中调用 因为那个时候 dom元素已经挂在上了
注意了 不能再 created 钩子函数中使用 因为那个时候 dom元素还没有准备好
会报出一个 null的问题 操作dom元素 会报 undefined操作 错误
同时 大家不要再 组件上添加 ref操作 组件的样式 这样本来就不可能
组件 通过ref只能操作 组件其中的方法和数据
哪位同学知道 其他的 vue中获取动态dom元素的 麻烦告知一下