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. 应用安全 - 软件漏洞 - Jira漏洞汇总

    CVE-2019-8451 ssrf url = url + '/plugins/servlet/gadgets/makeRequest?url=' + host + '@www.baidu.com/ ...

  2. 应用安全 - SuiteCRM - 漏洞汇总

    CVE-2019-12598.CVE-2019-12601 SuiteCRM SQL注入与远程代码执行漏洞 SalesAgility SuiteCRM .x版本..x版本和7..5之前的7..x版本中 ...

  3. [2019杭电多校第三场][hdu6606]Distribution of books(线段树&&dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6606 题意为在n个数中选m(自选)个数,然后把m个数分成k块,使得每块数字之和最大的最小. 求数字和最 ...

  4. 洛谷 P2672 推销员(贪心,模拟)

    传送门 解题思路 第一种: 对于选i家,很显然,a值前i-1家的一定会选,所以只需要考虑最后一家的选法.要么是选择a值第i大的(就不管s了),要么选择剩下的中s最大的. 我们把每一家的情况(s和a)存 ...

  5. Codeforces 1042C (贪心+模拟)

    题面 传送门 分析 思路简单,但代码较复杂的贪心 分类讨论: 有0 负数有奇数个:将绝对值最小(实际最大)的负数和0全部乘到一起,最后删掉0 负数有偶数个:将0全部乘到一起,最后删掉0 没有0 负数有 ...

  6. 问题 J: 老肖数等式

    问题 J: 老肖数等式 时间限制: 1 Sec  内存限制: 128 MB提交: 1594  解决: 741[提交] [状态] [命题人:jsu_admin] 题目描述 老肖前几年当了小学数学老师,他 ...

  7. .NET基础篇——利用泛型与反射更新实体(ADO.NET Entity Framework)(转)

    自从ADO.NET Entity Framework面世以来,受到大家的热捧,它封装了大量代码生成的工具,用户只需要建立好实体之间的关系,系统就是会为用户自动成功了Add.Delete.CreateO ...

  8. HTML页面顶部出现空白的解决办法

    首先我们按F12打开浏览器的开发者工具(不同浏览器打开方式不一样),选择body元素,会发现body有margin:8px的外边距,需要我们重写默认样式. 解决办法: bdoy { margin:0; ...

  9. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  10. Solr的学习使用之(九)facet.pivot实战

    facet.pivot自己的理解,就是按照多个维度进行分组查询,以下是自己的实战代码,按照newsType,property两个维度统计: public List<ReportNewsTypeD ...