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. 应用安全-web安全-WebShell整理

    shellcode.aspx <%@ Page Language="C#" AutoEventWireup="true" Inherits="S ...

  2. 前端004/React常用UI组件

    每天进步一点点〜 Ant Design of React //蚂蚁金服设计平台.需要应用何种类型组件可参考API React + mobx + nornj 开发模式文件说明: [1].A.t.html ...

  3. JS和C#后台获取网站URL

    例:网页URL :  http://localhost:8086/index.aspx?topicId=361 1.设置或获取 href 属性中跟在问号后面的部分:window.location.se ...

  4. JAVA总结--正则表达式

    正则表达式定义: pattern 对象是一个正则表达式的编译表示.Matcher 对象是对输入字符串进行解释和匹配操作的引擎.PatternSyntaxException 是一个非强制异常类,它表示一 ...

  5. Java-第N篇推荐的一些学习书籍

    1.推荐的一些学习书籍或者需要掌握的基本知识 book | |---ant | |---maven | |---git(菜鸟教程) | |---Dos shell | |---linux常用的命令.l ...

  6. 分支结构 :if - else

    分支结构 :if - else 格式一: if(条件表达式){ 执行语句; } 格式二:二选一 if(条件表达式){ 执行语句1; }else{ 执行语句2; } 格式三: 多选一 if(条件表达式1 ...

  7. Spring-Boot 整合Dubbo 解决@Reference 注解为null情况

    首先检查一下你的spring boot版本是多少? 如果是2.X 不用看了,spring boot 2.x 必定会出现这个问题, 改为 1.5.9 或其他1.x版本,目前生产环境建议使用1.x版本. ...

  8. IOC依赖注入的原理

    一.什么是IOC 维基百科上说到:2004年Martin Fowler 提出了“控制反转的”概念,他得出的结论是:依赖对象的获得被反转了.后来为这个创造了一个更好的名字:依赖注入(IOC = Inve ...

  9. Sublime text设置快捷键让编写的HTML文件在打指定浏览器预览

    作者:浪人链接:https://www.zhihu.com/question/27219231/answer/43608776来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  10. Java Web项目使用图形验证码 — Kaptcha

    一.验证码介绍 生成的主要方式: 1.使用Java原生的方式,其中包含了Servlet.AWT.ImageIO的使用: 2.使用开源库,例如Jcaptcha.Kaptcha...: (各图形验证码开源 ...