精华内容
下载资源
问答
  • vue操作dom元素
    千次阅读
    2022-01-26 16:16:41

    方法一: 直接给的元素加id,使用document.getElementById(“id”)获取,然后操作 dom 元素

    mounted(){
    	this.element = document.querySelector('#element_1');
    	this.element.style.color = "red";
    }
    

    为什么是在mouted钩子使用?
    因为只有在执行mounted的时候,vue才已经渲染了dom节点,这个时候是可以获取dom节点的

    方法二: 使用ref,给元素添加ref=“name” ,使用 this.$refs.name 获取到该元素,再对元素进行操作

    // 定义ref
    <div ref="div_1">获取元素</div>
    // 获取并操作
    this.$refs.div_1.style.backgroundColor="red"
    

    建议:vue中尽量不去操作 dom 元素,选用 ref 操作属性获取

    更多相关内容
  • vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到 “set” ref=“up”> .set是我们要操作的dom对象,它的ref是 up @click=“Alert” 给父元素一个点击事件, 接下来我们来编写这个...
  • 本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue操作dom元素的三种方法

    千次阅读 多人点赞 2020-09-19 09:47:55
    vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到 < div class=“set” ref=“up”> .set是我们要操作的dom对象,它的ref是 up @click=“Alert” 给父元素一个点击事件, 接...

    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”;
    }

    <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>
    


    3.jQuery操作dom

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

      如果这篇文章对你有所帮助,请查看我的置顶文章,感谢!

    展开全文
  • vue操作dom元素的三种方法介绍和分析

    万次阅读 多人点赞 2019-03-07 09:55:27
    肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue中怎么操作dom呢? 以下是常用...

    相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue中怎么操作dom呢?

    以下是常用的三种方法:

    1、jQuery操作dom(推荐指数:★☆☆☆☆):

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

    2、原生js操作dom(推荐指数:★★★★☆):

    原生js获取dom就很简单了,例如:根据id、class、当前元素的上一个元素......

    3、vue官方方法:ref(推荐指数:★★★★★):

    vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到(注意this指向),此方法尤其适用于父元素需要操作子组件的dom元素,这也是子传父传递数据的一种方法

    下面让我来看个案例:

    设置了一个button按钮,通过点击事件,然后弹出 新增的弹框 , 然后点击 “ × ”的button按钮,关闭弹框,此时需要操作弹框的dom元素,通过ref定义一个名字, 然后在方法中通过  this.$refs.名字  获取对应的dom

    <template>
        <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>
    </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>
        /* 容器 */
        .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{
            width: 500px;
            height: 600px;
            background: #2b2c2f;
            position: fixed;
            left: calc(50% - 250px);
            top: calc(50% - 300px);
            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%;
            height: 550px;
            overflow-x: hidden;
            overflow-y: auto;
            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>

    效果图:

    以上就是vue中操作dom的方法

    如有问题,请指出,接受批评。

    个人微信公众号:

    展开全文
  • vue操作dom元素

    2020-08-27 16:37:51
    原生js操作dom 原生js获取dom就很简单了,例如:根据id、class、当前元素的上一个元素 使用DOM API直接找元素 ...这种方法足够简单直观,Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素,我们可以直接使

    使用DOM API直接找元素

    <div class="box"></div>
    	
    <script>
    	mounted () {
    		let elm = this.$el.querySelector('.box)
    	}
    </script>
    

    这种方法足够简单直观,Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素,我们可以直接使用$elquerySelector, querySelectorAll等方法获取匹配的元素。

    使用自定义指令

    <p  v-change='w'>1111</p>
    
    Vue.directive('change',function(el,binding){
        console.log(el)
        console.log(binding);
    })

    refs

    vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到(注意this指向),此方法尤其适用于父元素需要操作子组件的dom元素,这也是子传父传递数据的一种方法

    <div  ref="box"></div>
    
    mounted () {
        console.log(this.$refs.a)
    }

     

    展开全文
  • 这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById(“id”);...如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错: Avoid mutating a prop dir
  • VUE操作dom元素的几种方法

    千次阅读 2021-02-02 11:10:04
    VUE操作dom元素 方法一: 访问子组件实例或子元素 尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用...
  • 猜测是vue使用的虚拟DOM,使得页面虽然已经渲染出来,但在Vue实例中让处在在虚拟DOM中,无法获取。 解决方法: 使用Vue.nextTick,看下官方材料: ‘在下次 DOM 更新循环结束之后执行延迟回调’,这句话不是特别...
  • 本篇文章主要介绍了在vue中获取dom元素内容的方法,可以通过给标签加ref属性,这里整理了详细的代码,有兴趣的可以了解一下
  • 文章目录Vue获取组件元素ref获取组件元素 Vue获取组件元素 如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的...Vue获取DOM元素的方法</title> </head> <body> <div id="ap
  • Vue获取DOM元素并修改属性

    万次阅读 2019-07-16 13:48:23
    Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素 Vue获取到元素并修改...
  • vue获取dom元素与修改样式详解

    千次阅读 2019-10-30 16:34:45
    vue中如何获取dom元素呢? 步骤详解 在标签上加上ref属性 如 : 在js中通过refs便可以获取dom如:this.refs便可以获取dom 如:this.refs便可以获取dom如:this.refs.refDemo 修改对应的样式名 如:this.$refs....
  • vue实例:添加删除元素r</title> <style type="text/css"> .form-group{ margin:10px; } .form-group>label{ display: inline-block; width: 5rem; text-align: right; } </style> <...
  • vue基础之ref操作dom元素

    千次阅读 2020-10-20 22:26:59
    学习vue是如何操作dom元素 提示:以下是本篇文章正文内容,下面案例可供参考 一.ref属性的使用 1.要给操作的元素设置ref属性 2.在创建的vue实例属性中的mounted(){this.$refs.ref属性值} 3.代码示例 <!DOCTYPE ...
  • Vue获取DOM元素样式和样式更改

    千次阅读 2019-04-17 09:26:14
    Vue获取DOM元素样式和样式更改 在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
  • vue操作dom元素节点的样式有好几种方式这里我总结了两种 第一种: 1.获取到元素节点(这里通过this.$refs获取元素节点) this.$refs.xxxxx.$el 2.操作元素的样式 this.$refs.num1Underline.$el.style.transform =...
  • vue获取dom元素注意事项

    千次阅读 2020-12-24 05:43:36
    mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{...}}vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一...
  • Vue动态设置Dom元素宽高

    千次阅读 2019-11-04 11:07:34
    slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slider"> <h1>Hamy</h1> </div> </template> <...
  • 本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素 ,具有一定的参考价值,有兴趣的可以了解一下。
  • vue不推荐我们操作dom,那么怎么获取元素呢? ref属性,则起到了它的作用– 我们首先来引用官网的关于ref属性的介绍 什么意思、通俗的讲就是给html标签添加一个ref属性指向一个名称,然后在vue实例当中使用 this.$...
  • vue监听window.resize方法 < template > < div id = "app" > < div : style = "{width: `${screenWidth}px`}" > < router - view / > < / div > < / div > < / template > < script > ...
  • vue获取dom元素高度的方法

    千次阅读 2021-09-03 16:17:41
    要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mounted() { let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度...
  • vue获取dom元素内容

    千次阅读 2020-12-19 16:54:35
    通过ref来获取dom元素vue官网上对ref的解释ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向...
  • scrollIntoView()解决vue点击对应文字滚动到当前页面的dom元素的位置

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,766
精华内容 20,306
关键字:

vue操作dom元素

友情链接: TestMongodb.rar