vue操作dom元素的3种方法示例


Posted in Javascript onSeptember 20, 2020

1.原生js操作dom

const dom = getElementById(‘box')

2.vue官方方法:ref

vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到

< div class=“set” ref=“up”>

.set是我们要操作的dom对象,它的ref是 up

@click=“Alert”

给父元素一个点击事件,

接下来我们来编写这个方法

methods:{
  this.$refs.addAlert.style.display = “block”;
}

CSS还要吗?

那我把代码全粘过来你们自己看吧

<template>
	<div id="app">
		<div class="index-box">
			<!--新增按钮-->
			<input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
			<!--新增数据源弹框-->
			<div class="addDbSource-alert" ref="addAlert">
				<div class="addAlert-top">
					<!--添加数据源-->
					<input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
				</div>
				<div class="addAlert-content">
					<div style="height: 1000px;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Index",
		data(){
			return {
			}
		},
		methods:{
			// 点击新增按钮,弹出新增数据源的弹框
			showAddAlert(){
				this.$refs.addAlert.style.display = "block";
			},
			// 点击 × 关闭新增数据源的弹框
			closeAddAlert(){
				this.$refs.addAlert.style.display = "none";
			},
		},
		created(){
		}
	}
</script>
<style scoped>
	#app{
		width:100%;
		height:100%;
		overflow-y:auto;
	}
 	/* 容器 */
 .index-box{
  width: 100%;
  height: 100%;
  background: #212224;
  display: flex;
 }
 /* 添加数据源按钮 */
 #DbManagement-addBtn {
  width: 100px;
  height: 45px;
  border: none;
  border-radius: 10px;
  background: rgba(29, 211, 211, 1);
  box-shadow: 2px 2px 1px #014378;
  margin-left: 20px;
  margin-top: 17px;
  cursor: pointer;
  font-size: 20px;
 }
 /*新增数据源弹框*/
 .addDbSource-alert{
  position: fixed;
		top:0;left:0;right:0;bottom:0;
		margin:auto;
  width: 4rem;height: 4rem;
  background: #2b2c2f;
  display: none;
 }
 /*新增弹框头部*/
 .addAlert-top{
  width: 100%;
  height: 50px;
  background: #1dd3d3;
  line-height: 50px;
  font-size: 20px;
  box-sizing: border-box;
  padding-left: 20px;
 }
 /*新增弹框关闭*/
 .addAlert-close{
  background: #1dd3d3;
  border: none;
  font-size: 30px;
  cursor: pointer;
  float: right;
  margin-right: 20px;
  margin-top: 5px;
 }
 /*新增弹框内容部分*/
 .addAlert-content{
  width: 100%;
  box-sizing: border-box;
  padding: 0px 30px 20px;
 }
 /* 滚动条效果 */
 /* 设置滚动条的样式 */
 .addAlert-content::-webkit-scrollbar {
  width: 5px;
 }
 /* 滚动槽 */
 .addAlert-content::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px rgba(40, 42, 44, 1);
  border-radius: 10px; */
 }
 /* 滚动条滑块 */
 .addAlert-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(29, 211, 211, 1);
  /* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */
 }
 .addAlert-content::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(29, 211, 211, 1);
 }
</style>

CSS比正文和脚本加起来都多,如果你能看懂CSS,没理由学不会 ref

还有第三种方法,jQuery 操作dom,看完以后直呼不敢用

3.jQuery操作dom

  只要拿jQuery的选择器,选中相应的dom进行操作就可以了,但是大家都知道jQuery获取元素是查找页面所有,相当于“循环”所有元素直至找到需要的dom,但是vue是单页面的,jQuery获取dom并不只是获取vue当前页面,而是从根路由开始查找所有,当其他页面出现相同的元素,也会被获取到,而且jQuery操作的dom,如果是根据动态获取数据渲染的,那么写在mounted里的操作方法将会失效,必须放到updated里,这样会导致有些操作被执行多遍,所以还是不建议在vue中使用jQuery。

总结

到此这篇关于vue操作dom元素的3种方法示例的文章就介绍到这了,更多相关vue操作dom元素方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
js实现本地时间同步功能
Aug 26 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
npm ci命令的基本使用方法
Sep 20 #Javascript
js面试题之异步问题的深入理解
Sep 20 #Javascript
js实现简单的点名器随机色实例代码
Sep 20 #Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 #Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 #Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 #Javascript
vue-cli3 热更新配置操作
Sep 18 #Javascript
You might like
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
详解Django-auth-ldap 配置方法
2018/12/10 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python imread、newaxis用法详解
2019/11/04 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
房地产员工找工作的自我评价
2013/11/15 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
人力资源经理自我评价
2014/01/04 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
大学生就业策划书范文
2014/04/04 职场文书
医德医风自我评价
2014/09/19 职场文书
财务负责人岗位职责
2015/02/03 职场文书
慰问信格式
2015/02/14 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python