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 ...
随机推荐
- 观察者模式(jdk实现)
1.定义 在对象中定义一对多的依赖,当一个对象改变状态,依赖它的对象会收到通知并更新. 2.实现 (主要通过jdk自己定义的观察者实现) 以气象站通知展示板为例子,当气象站收到的各种参数改变的时候 ...
- python 递归,深度优先搜索与广度优先搜索算法模拟实现
一.递归原理小案例分析 (1)# 概述 递归:即一个函数调用了自身,即实现了递归 凡是循环能做到的事,递归一般都能做到! (2)# 写递归的过程 1.写出临界条件 2.找出这一次和上一次关系 3.假设 ...
- spring-data-elasticsearch使用出现的一些小问题
问题一failed to load elasticsearch nodes : org.elasticsearch.index.mapper.MapperParsingException: No ty ...
- JSP程序不能正常运行 MyEclipse10 Tomcat6.0
我写的sp程序,上午运行正常:但是下午再打开运行会提示对jsp解释失败 谁知道这是怎么回事呢? 后来是发现: 要运行JSP程序 Myeclipse10和Tomcat6的jdk都要调整到jdk1.7的版 ...
- vue 父子component生命周期
如今前端框架都流行组件化,页面元素都可以使用组件进行高度概括,那么处理组件之间的关系就如同处理页面架构一样重要.正确理解组件之间的关系,才能让代码按照我们与预料方式工作.最近参与了一个Vue.js的项 ...
- “希希敬敬对”团队——敏捷冲刺Alpha过程总结
“希希敬敬对”团队在七天冲刺过程中每一个小组成员都尽力去完成自己的任务.在合作过程中,总算是有一些成果出现,代码功能能够实现. 对此次冲刺有如下优缺点: 优点: 团队人员合作较多,成员都能够积极响应参 ...
- JavaSE编码试题强化练习3
1.给20块钱买可乐,每瓶可乐3块钱,喝完之后退瓶子可以换回1块钱,问最多可以喝到多少瓶可乐. public class TestCirculation { public static void ma ...
- [Web 前端] 017 css 浮动
1. 文档流 指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列 块元素占一行 行内元素在一行之内 从左到右排列 先写的先排列 后写的排在后面 每个盒子都占据自己的位置 2. 浮动的特性 ...
- Sobel硬件实现的硬件代码分析(三)
#include "xaxivdma.h" #include "xaxivdma_i.h" #include "xhls_sobel.h" ...
- VUE搭建脚手架CLI
1.vue的安装基于node,一定要确保本机已经安装node,node安装完成之后,会自带npm包.node下载地址:nodejs.cn/download/ 安装完成以后使用 ,进入cmd使用以下命令 ...