vue中操作Dom节点的方法
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节点的方法的更多相关文章
- 在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...
- jQuery操作DOM节点的方法总结
1.parent():获得当前匹配元素集合中每个元素的父元素,该方法只会向上一级对 DOM 树进行遍历 $('li.item-a').parent().css('background-color', ...
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- Vue中获取dom元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- OSG中找到特定节点的方法
OSG中找到特定节点的方法 转自:http://38288890.blog.163.com/blog/static/19612845320072721549504/ 为了在OSG中找到需要的节点并对节 ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
随机推荐
- Linux 系统下的7个运行级别
转自:http://blog.chinaunix.net/uid-22746363-id-383989.html Linux系统有7个运行级别(runlevel)运行级别0:系统停机状态,系统默认运行 ...
- [Git] 007 三棵树以及向本地仓库加入第一个文件
1. "三棵树" 1.1 前言 理论上要稍稍复杂一点 我在这里说得简化一点 顺道挖个坑 下回具体介绍 坑号编码:Git07-1 1.2 看图 1.3 简介 树左:工作区(平时写代码 ...
- hive DML操作
1.数据导入 1)向表中装载数据(load) 语法 hive> load data [local] inpath '/opt/module/datas/student.txt' [overwri ...
- 简单易用的leetcode开发测试工具(npm)
描述 最近在用es6解leetcode,当问题比较复杂时,有可能修正了新的错误,却影响了前面的流程.要用通用的测试工具,却又有杀鸡用牛刀的感觉,所以就写了个简单易用的leetcode开发测试工具,分享 ...
- vue 跳转页面返回时tab状态有误的解决办法
一.前言 最近在做新vue项目的时候遇到了一个问题,就是tab间的切换没有问题,当跳转到其他页面时,且这个页面并非子路由,再用浏览器的返回按钮返回首页时,tab的active始终指向默认的第一个选项. ...
- 搜索(DFS)---能到达的太平洋和大西洋的区域
能到达的太平洋和大西洋的区域 417. Pacific Atlantic Water Flow (Medium) Given the following 5x5 matrix: Pacific ~ ~ ...
- Log4Net 之将日志记录到数据库的后台实现 (二)
原文:Log4Net 之将日志记录到数据库的后台实现 (二) 大家下午好,昨天讲了配置,今天我们讲讲后台实现,在完成了后台实现后,我们才能真正意义上的解决把自定义属性字段值录入到数据库中. 在开写之前 ...
- WPF绑定并转换
首先新建个项目,我的项目名叫BindConverterDemo,你的话什么都可以,我这里只是做demo 再建两个类,DataDemo,ConverterDemo 这个是DataDemo类 public ...
- Bootstrap真的总是好的吗
原文地址:Bootstrap considered harmful 原文作者:Hidde de Vries 译文出自:neal 译者: Neal 个人主页:http://neal1991.python ...
- vue.js(11)--案例--关键字搜索列表
关键字搜索品牌案例 (1)页面布局 <div class="app"> <div class="panel panel-primary"> ...