精华内容
下载资源
问答
  • 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)
    }

     

    展开全文
  • 主要给大家介绍了关于vue操作dom元素的3种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 操作dom元素

    2019-01-28 14:24:38
    html: &lt;div class="foods-wrapper" ref="foodScroll"&gt; &lt;ul&gt; &lt;!-- 专场 --&gt; &lt;li class="container-list food-list-hook"...

     html:

    <div class="foods-wrapper" ref="foodScroll">
         <ul>
            <!-- 专场 -->
            <li class="container-list food-list-hook">
              <div v-for="(item,index) in container.operation_source_list" :key="index">
                <img :src="item.pic_url">
              </div>
            </li>
            <!-- 具体分类 -->
              <li v-for="(item,index) in goods" :key="index" class="food-list food-list-hook">
            </li>
          </ul>
    </div>
    
    

    js获取ref foodScroll下class为food-list-hook的集合

     let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
          // console.log(foodlist)

     

    展开全文
  • 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-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监听window.resize方法 < template > < div id = "app" > < div : style = "{width: `${screenWidth}px`}" > < router - view / > < / div > < / div > < / template > < script > ...
  • 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元素样式和样式更改示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些...那怎么获取相关的dom元素呢? 这里我想到了3个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById(“id”...
  • vue获取DOM元素

    2020-01-11 11:15:13
    由于vue不推荐操作DOM节点所以最好不要使用原生的getElement方法 vue有一个reference属性 它能够获取DOM节点 在想要获取的节点上添加ref这个属性 ,这个节点就会被实例获取到 操作DOM节点 this.$refs.myp... .....
  • 使用Vue获取DOM元素

    2020-02-25 16:44:17
    Vue中,使用$refs属性可以获取DOM元素。 注意:需要在DOM元素中挂载ref属性后才能使用 //html <p id="app" ref = "myp" @click = "oks">ok</p> //在 DOM中,需要设置 ref属性 //js let vm = new Vue...
  • vue操作dom元素节点的样式有好几种方式这里我总结了两种 第一种: 1.获取到元素节点(这里通过this.$refs获取元素节点) this.$refs.xxxxx.$el 2.操作元素的样式 this.$refs.num1Underline.$el.style.transform =...
  • vue获取dom元素的几种方式

    千次阅读 2020-10-22 18:54:41
    获取dom元素:this.$refs.xx. 如图: mounted()时才能获取this.$refs.xx 获取dom标签:this.$refs.xx.$el $parent: 获取当前组件的父组件 $el: 获取当前组件的DOM元素 vm.$nextTick 什么时候用:在Vue渲染...
  • Vue获取DOM元素样式和样式更改

    千次阅读 2019-04-17 09:26:14
    Vue获取DOM元素样式和样式更改 在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
  • vue直接操作dom元素 砌石墙 (vue-masonry-wall) A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this because other libraries has ...
  • vue获取dom元素高度的方法

    千次阅读 2020-01-02 11:50:40
    本文转载自:...获取高度: <div ref="自定义名称" ></div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mounted() { let h = window.innerH...
  • 这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById(“id”);...如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错: Avoid mutating a prop dir
  • vue操作Dom

    2020-05-20 23:33:54
    获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素 如ul中的li element = document.querySelector(selectors)//获取dom元素中的第一个元素 在vue中使用 mounted(){//...
  • vue获取DOM元素并设置属性

    千次阅读 2019-10-01 19:47:50
    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref=“...
  • vue操作DOM元素

    2019-05-06 14:52:39
    先看下面的这一串很简单代码 <!... , initial-scale=1.0"> <title>Document ...通过上面的代码,便可知vue如果想操作DOM的时候需要给该元素添加一个属性 ref 然后通过 $refs的方式来获取该DOM元素
  • vue中获取并操作dom元素

    万次阅读 多人点赞 2018-06-29 00:11:45
    获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素 如ul中的li element = document.querySelector(selectors)//获取dom元素中的第一个元素 在vue中使用 mounted(){...
  • Vue中获取DOM元素 <div id="app"> <input type="button" value="获取元素" @click="getElement"> <h3 ref="myh3">今天天气真好啊</h3> </div> <script> ...
  • VUE操作dom元素 方法一: 访问子组件实例或子元素 尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用...
  • vue获取DOM元素,触发事件

    千次阅读 2020-02-20 10:44:05
    HTML元素: 如果元素是一个原生的HTML元素,通过绑定ref="selector" 通过this.$refs['selector'].click() 触发...如果元素是一个组件,通过绑定ref="selector" 需要通过this.$refs['selector'].$el.click() 触发 ...
  • VueDOM元素添加事件的特殊情况

    千次阅读 2020-03-12 21:48:14
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...script type="text/javascript"src="../vue/dist/vue.min.js">&l...
  • 1、声明定义并使用data数据 ...响应式:数据和 DOM 已经被建立了关联,data中存在的属性是响应式的,即修改data中message的值,你将看到页面内容相应地更新 值得注意的是:只有当实例被创建时data中存在的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,963
精华内容 15,985
关键字:

vue操作dom元素

vue 订阅