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. git_01_上传第一个项目至git

    前言 Git是一个开源的分布式版本控制系统,可以有效.高速地处理从小到大的项目版本管理.最近在自己研究自动测试,也准备放到git上管理.由于工作中是在已有的代码库拉取.提交代码.自己想要初次建库上传项 ...

  2. python笔记01(详情请看廖雪峰的官方网站)

    python 在调用函数的时候, 如果传入的参数数量不对, 如果传入的参数类型不对 会报TypeError的错误,并且Python会明确提示参数错误原因. hex()内置函数会把一个整数转换成十六进制 ...

  3. mybatis001-动态标签Trim用法

    Mybatis动态标签Trim用法 一.<trim></trim>标签用法 示例一: select * from user <trim prefix="WHER ...

  4. C#后台获取日期:当天、前七天、后七天

    DateTime.Now.ToString(); //当前时间DateTime.Now.AddDays(7).ToString(); //当前时间加上7天DateTime.Now.AddDays(-7 ...

  5. Eureka-server配置servlet.context-path后导致Eureka-client注册到server问题

    在springboot项目里配置了servlet.context-path(应用上下文路径),也称之为项目路径,该配置让项目URL后增加配置的值.如果在Eureka-server中配置该值,当然也会改 ...

  6. Spring IoC,IoC原理

    一.IoC概念及原理 IOC的别名:依赖注入(DI) 2004年,Martin Fowler探讨了同一个问题,既然IOC是控制反转,那么到底是“哪些方面的控制被反转了呢?”,经过详细地分析和论证后,他 ...

  7. 日记smarthome

    测试命令:测试命令 7e 7e 两个字节 一个字节  两个字节 一个字节     解释: 两个字节是userid的值 int Userid = data[i] * 256 + data[i + 1]; ...

  8. getCurrentSession 与 openSession区别

    getCurrentSession () 使用当前的session openSession()重新建立一个新的session 使用SessionFactory.getCurrentSession()需 ...

  9. [集合]java中的 可变参数

    可变的参数类型,也称为不定参数类型.英文缩写是varargus,还原一下就是variable argument type.通过它的名字可以很直接地看出来,这个方法在接收参数的时候,个数是不定的. pu ...

  10. 13-jQuery事件绑定和常用鼠标事件

    # 关于事件 ## 事件绑定 1.**基本绑定** > $(element).click(function(){})>> $(element).dblclick(function() ...