vue获取dom元素与修改样式详解
vue中如何获取dom元素呢?步骤详解在标签上加上ref属性如 :在js中通过refs便可以获取dom如:this.refs便可以获取dom如:this.refs便可以获取dom如:this.refs.refDemo修改对应的样式名如:this.$refs.refDemo.style.backgroundColor="#108ee9"还不会? 请看代码例子<tem...
·
vue中如何获取dom元素呢?
步骤详解
- 在标签上加上ref属性 如 :
- 在js中通过
this.$refs.加ref的值
便可以获取dom 如:this.$refs.refDemo - 修改对应的样式名 如:this.$refs.refDemo.style.backgroundColor="#108ee9"
下面是代码例子
<template>
<div class="demo" ref="refDemo">
这是一个测试demo
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{}
},
mounted() {
//查看可以修改的所有css属性
console.log(this.$refs.refDemo.style)
//按业务要求修改属性名
this.$refs.refDemo.style.backgroundColor="#108ee9"
this.$refs.refDemo.style.height="80px"
this.$refs.refDemo.style.lineHeight="80px"
this.$refs.refDemo.style.color="#fff"
//还不会?请加群 897149839
},
methods:{
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
更多推荐
已为社区贡献7条内容
所有评论(0)