Vue 动态修改dom样式

首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的。教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈~我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转到教程

                    
 

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

这里写图片描述

           

浏览人工智能教程

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值