Vue 动态修改dom样式

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

                     

 

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

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

  • 获取dom

  • 修改样式

一、 vm.$el 修改dom样式

获取dom节点

根节点,即被挂载的dom

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

  • 1

  • 2

  • 3

创建一个vue 实例

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

通过vue实例，获取dom元素

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

  • 1

  • 2

代码示例

修改dom样式

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

  • 1

  • 2

  • 3

局限性：

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

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

二、$refs 修改dom样式

ref vs $refs

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

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

ref

// 单个dom节点<div ref='singleDom'></div>// 子组件中<child-component ref="comp"></child-component>

  • 1

  • 2

  • 3

  • 4

$refs

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

  • 1

  • 2

示例代码

获取dom节点

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

  • 1

  • 2

修改dom样式

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

  • 1

           

                     

 

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

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

  • 获取dom

  • 修改样式

一、 vm.$el 修改dom样式

获取dom节点

根节点,即被挂载的dom

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

  • 1

  • 2

  • 3

创建一个vue 实例

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

通过vue实例，获取dom元素

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

  • 1

  • 2

代码示例

修改dom样式

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

  • 1

  • 2

  • 3

局限性：

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

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

二、$refs 修改dom样式

ref vs $refs

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

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

ref

// 单个dom节点<div ref='singleDom'></div>// 子组件中<child-component ref="comp"></child-component>

  • 1

  • 2

  • 3

  • 4

$refs

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

  • 1

  • 2

示例代码

获取dom节点

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

  • 1

  • 2

修改dom样式

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

  • 1

           

以上是 Vue 动态修改dom样式 的全部内容， 来源链接： utcz.com/z/378413.html

回到顶部