1.vue中ref操作dom节点

<template>
<div id="app">
<div ref="box"></div>
<button @click="changeColor">改变</button>
</div>
</template> <script>
export default {
name: "app",
data() {
return {
};
},
methods:{
changeColor() {
this.$refs.box.style.color = 'red'
}
}
};
</script> <style> </style>

页面效果:

vue中操作Dom节点的方法的更多相关文章

  1. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  2. jQuery操作DOM节点的方法总结

    1.parent():获得当前匹配元素集合中每个元素的父元素,该方法只会向上一级对 DOM 树进行遍历 $('li.item-a').parent().css('background-color', ...

  3. 第七十六篇:ref引用(在vue中引用Dom的方法)

    好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...

  4. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  5. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  6. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  7. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  8. OSG中找到特定节点的方法

    OSG中找到特定节点的方法 转自:http://38288890.blog.163.com/blog/static/19612845320072721549504/ 为了在OSG中找到需要的节点并对节 ...

  9. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

随机推荐

  1. Altium Designer chapter9总结

    改善系统的信号完整性和电磁兼容性需要注意如下: (1)系统电源尽量使用稳压输出. (2)高速期间器件与低俗器件隔离,避免低速器件影响高速器件. (3)模拟模块部分与数字模块部分分离. (4)为器件就近 ...

  2. virutalenv一次行安装多个requirements里的文件

  3. maven build失败 (Failure to find io.renren:renren-security:pom:3.2.0 in http://maven.aliyun.com/nexus/content/groups/public/ was cached in the local repository...)

      今天mvn clean package一个子工程(renren-admin)时报错: Failed to execute goal on project renren-admin: Could n ...

  4. Git-第四篇廖雪峰Git教程学习笔记(3)远程仓库,克隆远端库

    1.本次连接的是gitHub仓库. 1>创建SSH Key. ssh-keygen -t rsa -C "youremail@example.com" lfy@lfy-PC ...

  5. RD Client、TeamViewer连接主机

    一.使用RD Client连接远程桌面 1.设置本地主机 2.查看电脑ip 3.手机安装RD Client 应用商店下载 Microsoft Remote Desktop PC name填入查询到的I ...

  6. Appscan工作原理详解

    AppScan,即 AppScan standard edition.其安装在 Windows 操作系统上,可以对网站等 Web 应用进行自动化的应用安全扫描和测试. Rational AppScan ...

  7. React.memo

    介绍React.memo之前,先了解一下React.Component和React.PureComponent. React.Component React.Component是基于ES6 class ...

  8. A dreamstart的催促 (快速幂) B TRDD got lost again

    A   dreamstart的催促 链接:https://ac.nowcoder.com/acm/contest/322/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ ...

  9. HTML5-video(播放暂停视频;打开关闭声音;进度条)

    <!DOCTYPE html> <html> <head> <title>HTML5-video(播放暂停视频:打开关闭声音:进度条)</titl ...

  10. C# http post请求帮助类

    using System; using System.Collections.Specialized; using System.IO; using System.Net; using System. ...