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. 【ABAP系列】SAP abap dialog screen屏幕参数简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP abap dialog ...

  2. 2017埙箫简谱清单分享(附音频Demo)

    前言 习箫五载,略有所获,皆在坚持. 本博文记录旨在记录练习过程中所录制的Demo以供自省.自娱.自乐,同时记录.分享简谱与箫友(目前为简谱,日后学会线谱后会添加相应谱子分类). 简谱 &&a ...

  3. 解决django项目无法连接远程mysql的问题

    我们都知道django项目可以通过修改settings.py文件中的DATABASES这个对象,使用不同的数据库. 如图所示,我们想连接远程的mysql,修改settings.py的配置 然后我们在终 ...

  4. 大数加减(51nod)

    1005 大数加法 给出2个大整数A,B,计算A+B的结果.     输入 第1行:大数A 第2行:大数B (A,B的长度 <= 10000 需注意:A B有可能为负数) 输出 输出A + B ...

  5. XE2再次安装JVCL

    说再次安装,是因为我忘了自己之前写过的方法,装完之后感觉怪怪的,想看看别人是怎么装的,于是用google搜索了一下,才发现之前写过: http://www.cnblogs.com/findumars/ ...

  6. Js中className的用法

    className可以用来改变标签元素的css类选择器,从而改变元素的样式 举个栗子 一个简单的无序列表,点击button之前ul的样式为uhh1 点击button后,调用check函数中的class ...

  7. Storm简介——实时流式计算介绍

    概念 实时流式计算: 大数据环境下,流式数据将作为一种新型的数据类型,这种数据具有连续性.无限性和瞬时性.是实时数据处理所面向的数据类型,对这种流式数据的实时计算就是实时流式计算. 特征 实时流式计算 ...

  8. C++ CMake 入门实战[转载]

    C++ CMake 入门实战 2016-11-05 CMake用于跨平台的编译系统,对于通常的c/c++工程,都是通过make来进行编译的,CMake可以通过指令生成Makefile文件来指导整个项目 ...

  9. 51nod 1554 欧姆诺姆和项链

    有一天,欧姆诺姆发现了一串长度为n的宝石串,上面有五颜六色的宝石.他决定摘取前面若干个宝石来做成一个漂亮的项链. 他对漂亮的项链是这样定义的,现在有一条项链S,当S=A+B+A+B+A+...+A+B ...

  10. 理解Promise (3)

    在promise  的then  中我们不仅有 成功状态 失败状态,可能还有等待状态,所以我们要对等待状态进行处理 function Promise(executor) { let self = th ...