vue中如何获取dom元素呢?

步骤详解

  1. 在标签上加上ref属性 如 :
  2. 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo
  3. 修改对应的样式名 如: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>

查看style对象里面的属性

Logo

前往低代码交流专区

更多推荐