vue获取dom元素与修改样式详解

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>