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压缩工具:X2JSCompactor
Jun 13 Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
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生成Flash动画的实现代码
2010/03/12 PHP
php中的三元运算符使用说明
2011/07/03 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
python包的导入方式总结
2021/03/02 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
合作经营协议书
2014/04/17 职场文书
小学社会实践活动总结
2014/07/03 职场文书
学习教师法的心得体会
2014/09/03 职场文书
国防教育标语
2014/10/08 职场文书
财政局长个人总结
2015/03/04 职场文书