vue2 如何操作dom
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考
- <template>
- <div>
- <div id="box" ref="mybox">
- DEMO
- </div>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- }
- },
- mounted () {
- this.init();
- },
- methods:{
- init() {
- const self = this;
- this.$refs.mybox.style.color = 'red';
- setTimeout(() => {
- self.$refs.mybox.style.color = 'blue';
- },2000)
- }
- }
- }
- </script>
- <style scoped>
- #box {
- width: 100px;
- height: 100px;
- line-height: 100px;
- font-size: 20px;
- text-align: center;
- border: 1px solid black;
- margin: 50px;
- color: yellow;
- }
- </style>
vue2 如何操作dom的更多相关文章
- Javascript操作DOM常用API总结
基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...
- mui项目中如何使用原生JavaScript代替jquery来操作dom 转自【B5教程网】:http://www.bcty365.com/content-146-3661-1.html
最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容 ...
- 操作DOM
操作dom一般是如下4个:更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容:遍历:遍历该DOM节点下的子节点,以便进行进一步操作:添加:在该DOM节点下新增一个子节点,相当于 ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
- HTML(.js) – 最简单的方式操作 DOM 的 JS 库
HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- 廖雪峰js教程笔记11 操作DOM(包含作业)
由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
随机推荐
- 自定义cnblogs样式小结
写在前面: 博客模版(皮肤)很多, 这里选择了一套相对"干净"的模版, 这套模版本身已经很好了, 简约大方, 在此基础上进行改动一下. 1.页面背景图源自网络. 2.回到顶部i ...
- tensorflow代码中的一个bug
tensorflow-gpu版本号 pip show tensorflow-gpu Name: tensorflow-gpu Version: 1.11.0 Summary: TensorFlow i ...
- [转]awesome-tensorflow-chinese
模型项目 Domain Transfer Network - Implementation of Unsupervised Cross-Domain Image Generation Show, At ...
- 转 java实现截图
转自 http://www.zhenhua.org/article.asp?id=382 可以直接运行! import java.awt.Dimension; import java.awt.Rect ...
- App 开发步骤
在 iOS 开发中,写一个 App 很容易,但是要写好一个 App,确是要下另一番功夫.首先,我们来看一个 App 的开发要求: 写一个 App,显示出 Spotify 上 Lady Gaga 相关的 ...
- 关于Ubantu下使用cshell的问题解决
在一个新创建的目录下使用cshell,直接在/etc/passwd 下对应的用户后 bash改为csh; 之后运行发现报错,后来查找发现/bin下没有csh执行脚本,之后安装csh;; 参考了http ...
- oracle下导出某用户所有表的方法
oracle下导出某用户所有表的方法 scott/tiger是用户名和密码,handson是导出的实例名 按用户方式导出数据(owner当中写的是用户名) exp scott/tiger@handso ...
- Java 内存模型及GC原理 (转载)
一个优秀Java程序员,必须了解Java内存模型.GC工作原理,以及如何优化GC的性能.与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只有全面提升内存的管理效率,才能 ...
- win7 git 安装
下载git: https://git-scm.com/download/win 二.Git安装 去官网下载完后一路下一步完成安装,如下图: 安装完后先在系统环境变量中看下是否配置 然后在桌面右 ...
- Oracle 12C -- 删除PDB
删除PDB SQL> select con_id,pdb_name,status from cdb_pdbs; CON_ID PDB_NAME STATUS ---------- ------- ...