您现在的位置是:首页 > Javascript
当前栏目
vue是如何获取元素节点 ?
2023-02-25 18:20:42 时间
Js中:用document.getElement之类的语句来操作dom; vue:使用vue提供的api,用 ref 来获取节点;
首先先用ref在元素上面做一个标记,然后用this.$refs.标记名来获取元素
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<span ref='pTag'>{{ message }}</span>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
message: 'hello 肾虚少年'
}
},
mounted() {
alert(this.$refs.pTag.innerHTML)
}
})
</script>
</body>
</html>
vue2.0 对比 vue10 获取元素:
vue1.0 :版本中
在标签中加上el=’dom’,然后在代码中this.$els.dom这样就拿到了页面元素
例如:<div class=’box’ v-el: myBox>你好</div>
让你好的颜色显示为红色:this.$els.my-box.style.color = ‘red’
vue2.0:版本中
在标签中加上 ref=’dom’,然后在代码中this.$refs.dom这样就拿到了页面元素
例如:<div class=’box’ ref=’myBox’>你好</div>
让你好的颜色显示为红色:this.$refs.myBox.style.color = ‘red
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项