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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php解决约瑟夫环示例
2014/04/09 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
php生出随机字符串
2017/07/06 PHP
JavaScript定义类的几种方式总结
2014/01/06 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
Python MD5文件生成码
2009/01/12 Python
浅析Python中的多重继承
2015/04/28 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python类的继承和多态代码详解
2017/12/27 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
财务会计人员岗位职责
2013/11/30 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书