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中执行任意html代码的方法示例解读
Dec 25 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 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实现的购物车类实例
2015/06/17 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
从0开始学Vue
2016/10/27 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
JSON 数据格式详解
2017/09/13 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
200行python代码实现2048游戏
2019/07/17 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
用python进行视频剪辑
2020/11/02 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
乡镇三项教育实施方案
2014/03/30 职场文书
工作说明书格式
2014/07/29 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2015年党员自评材料
2014/12/17 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书