Vue 动态修改dom样式

Vue 的核心是允许是模板语法来声明式的将数据渲染进DOM系统

修改dom样式的思路，无非就是两步：

• 获取dom
• 修改样式

一、 vm.$el 修改dom样式

获取dom节点

根节点,即被挂载的dom

<div id="app">
{{info}}
div>

创建一个vue 实例

let app = new Vue({
	el: "#app",  // 页面中已经存在的dom元素作为挂载目标
  data: {
  	info: 'hello vue!'
  }

})

通过vue实例，获取dom元素

// vue实例提供 $el 进行访问dom元素
console.log('elem',app.$el)

代码示例

修改dom样式

// app.$el.style 获取dom的样式
app.$el.style.color = 'red'

局限性：

这种方式只能修改vue实例挂载的dom样式。

如果要修改组件中某个dom的样式，那就有些费力。下面介绍第二种方式，也是日常开发最常用的方法。

二、$refs 修改dom样式

ref vs $refs

ref 目标对象：是单个dom元素或子组件。
$refs 目标对象： 任意组件都会注册$refs属性。

两者联系
当子组件中出现有ref的引用信息时，父组件中的$refs就可以获取到该子组件的引用。

ref

// 单个dom节点

// 子组件中

$refs

// 父组件中
console.log(this.$refs.singleDom) // this 指代父组件

示例代码

获取dom节点

// 通过 $refs 属性，获取子组件的dom
console.log(this.$refs.singleDom)

修改dom样式

this.$refs.singleDom.style.color = 'red'