在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子
1 <template>
2 <div>
3 <div id="box" ref="mybox">
4 DEMO
5 </div>
6 </div>
7 </template>
8
9 <script>
10 export default {
11 data () {
12 return {
13
14 }
15 },
16 mounted () {
17 this.init();
18 },
19 methods:{
20 init() {
21 const self = this;
22 this.$refs.mybox.style.color = 'red';
23 setTimeout(() => {
24 self.$refs.mybox.style.color = 'blue';
25 },2000)
26 }
27 }
28
29 }
30 </script>
31
32 <style scoped>
33 #box {
34 width: 100px;
35 height: 100px;
36 line-height: 100px;
37 text-align: center;
38 border: 1px solid black;
39 margin: 50px;
40 color: yellow;
41 }
42 </style>
在vue中操作dom元素的更多相关文章
- Vue中获取dom元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
- vue中操作Dom节点的方法
1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...
- 20.Vue中获取DOM元素和组件
1.获取DOM元素和组件:this.$refs
- vue中一个dom元素可以绑定多个事件?
其实这个问题有多个解决方法的 这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数 这时候千万别忘记 原创 如需转载注明出处 谢谢
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- Vue中的DOM操作
1.在要获取的标签中添加 ref="xx" 示例: <button ref="btn">一个按钮</button> 2.在 mounte ...
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- Vue动态设置Dom元素宽高
需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slide ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
随机推荐
- 阿里社招Java面试题总结——面试官分享
面试题 1.Java中的内存溢出是如何造成的 2.gc的概念,如果A和B对象循环引用,是否可以被GC? 3.Error.Exception和RuntimeException的区别,作用又是什么? 4. ...
- Linux执行后台work相关
Linux的后台运行.关闭.查看后台任务 & ctrl+z jobs fg bg kill nohup setsid disown screen 1.& 加在命令的最后,可以把命令放到 ...
- 算法与数据结构基础 - 递归(Recursion)
递归基础 递归(Recursion)是常见常用的算法,是DFS.分治法.回溯.二叉树遍历等方法的基础,典型的应用递归的问题有求阶乘.汉诺塔.斐波那契数列等,可视化过程. 应用递归算法一般分三步,一是定 ...
- Cookie的有效路径
程序实现: protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletE ...
- Set集合、List集合
集合体系:Collection.Map接口 存储数量不等的多个对象,不能存储基本数据类型,如存储基本数据类型会自动装箱 ======================================== ...
- 当 K8s 集群达到万级规模,阿里巴巴如何解决系统各组件性能问题?
作者 | 阿里云容器平台高级技术专家 曾凡松(逐灵) 本文主要介绍阿里巴巴在大规模生产环境中落地 Kubernetes 的过程中,在集群规模上遇到的典型问题以及对应的解决方案,内容包含对 etcd.k ...
- python unittest+parameterized,单元测试框架+参数化
总要写新的自动化测试模块,在这里把demo记录下来,后面方便自己直接复制粘贴 from nose_parameterized import parameterized import unittest ...
- Centos 7 配置tomcat服务器
1.首先查看当前系统版本 uname -a 2.安装之前查看系统是否安装了java rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 如果没 ...
- python库之turtle(图形绘制) 开启新的快乐源泉
相信有不少人学习python 都是听了老前辈的推荐 “学python好,python有趣的代码多” 比如说画一只小狮子 这就是今天想要介绍的绘制图形库-turtle 如果也想这样画一只小狮子,或者其他 ...
- Maven 梳理-自动创建Maven项目(非web)
mvn archetype:create和mvn archetype:generate create is deprecated in maven 3.0.5 and beyond,在maven3.0 ...