VUE3中Class 与 Style 绑定

一、问题引入

原项目把一块内容直接写在了模块中（浏览器显示的一整个页面），现在想把它提成一个单独组件，而且把其中使用 documentgetElementById('id') 改为 ref 获取元素的形式。

单独创建一个 vue 组件，通过绑定传值，触发页面变化从而触发 beforeUpdate 。

然后发现 beforeUpdate() 中根本获取不到此元素，用原生js获取也不行。

三、解决

1、 beforeUpdate() 生命周期函数中，在获取元素语句外套用 this$nextTick(function(){}) 。（ mounted 无效，原因待查明）

官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。

在日常开发中，我们经常会动态地给一个元素增加或者删除一个class，来更改它的样式

比如选中了一个元素，那么给它加一个class叫active，同时其他元素要删除active这个class

我们这节课来学习在vue中如何动态的控制元素的class属性

我们给一个元素增加:class（v-bind:class的简写）来动态切换class

这里:class接受的是一个js对象，这个对象的键active，就是我们要动态切换的class的名称，值hasFocus可以理解为是一个Boolean型的值，

如果hasFocus是一个真值时，在元素上就会加上对应的class，渲染结果就是

如果hasFocus是一个假值时，在元素上就不会有active这个class，渲染结果就是

如果同一个元素，有多个class需要动态控制，只需要在对象内增加多个键值就行了，如果有固定的class，按普通的html的方式写就行了 class和:class两个属性可以同时存在

还有一点需要注意，如果我们的class的名称带有短杠，比如上面的large-size,需要用引号括起来

下面我们写一个例子，我们有一个超级英雄列表，点名字以后，文字就变红

在工作中这样的列表最常见的就是网站的导航栏，

比如有首页、公司简介、关于我们、招聘信息等导航，

用户在哪个页面时，哪个的导航就是高亮的状态，

小伙伴们可以考虑一下怎么实现

动态绑定class还有其他的语法，大家在熟练掌握这种对象写法后，可以去官网上看一下其他的写法，我就不再介绍了，一下学太多对初学者来说容易记混了。

这个你可以换种思路，用一个变量来控制显示样式，官网上面也有说。当这个变量为true时，说明有这个样式，当变量为false时则没有这个样式。

>

首先

vue的点击事件

是用

@click

=

“clickfun()”

属性

在html中绑定的,

在点击的函数中

添加$event

参数就可以

比如

<button

@click

=

“clickfun($event)”>点击</button>

methods:

{

clickfun(e)

{

//

etarget

是你当前点击的元素

//

ecurrentTarget

是你绑定事件的元素

}

},

以上这篇vue

的点击事件获取当前点击的元素方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue如何获取点击事件源的方法VUE中v-on:click事件中获取当前dom元素的代码vue获取当前点击的元素并传值的实例vue获取dom元素注意事项在Vue组件中获取全局的点击事件方法

windowonload=function(){

        waterfall();

        windowonscroll=function(){

            

    var parent=documentgetElementById("main");

    var boxs=getByClass(parent,"box");

    var scrollH=documentdocumentElementscrollTop||documentbodyscrollTop;

       var documentH=scrollH+documentdocumentElementclientHeight;

    var    lastH=boxs[boxslength-1]offsetTop+Mathfloor(boxs[boxslength-1]offsetHeight/2);

       /763/

     

        if(lastH-350<documentH){      //这里的lastH不减掉350，就无法进入if语句？？？

                                /465/

dataInt={"data":[{"src":"1jpg"},{"src":"2jpg"},{"src":"3jpg"},{"src":"7jpg"},{"src":"4jpg"},{"src":"5jpg"},{"src":"6jpg"}]};

for(var i=0;i<dataIntdatalength;i++){

        var divB=documentcreateElement("div");

        divBclassName="box";

        parentappendChild(divB);

        var divP=documentcreateElement("div");

        divPclassName="pic";

        divBappendChild(divP);

        myimg=documentcreateElement("img");

        myimgsrc="/images/"+dataIntdata[i]src;

        

        divPappendChild(myimg);

}

waterfall();

}

}

}

function waterfall(){

    

var oParent=documentgetElementById("main");

var boxs=getByClass(oParent,"box");

var boxW=boxs[0]offsetWidth;

var num=Mathfloor(documentdocumentElementclientWidth/boxW);

oParentstylecssText="width:"+boxWnum+"px;margin:0 auto;";

  

    boxHarr=new Array();

    for(var i=0;i<boxslength;i++){

        if(i<num){

            boxHarrpush(boxs[i]offsetHeight);

        }else{

           

            var minH=Mathminapply(null,boxHarr);

            var minHindex=getminHindex(boxHarr,minH);

            boxs[i]styleposition="absolute";

            boxs[i]styletop=minH+"px";

            boxs[i]styleleft=minHindexboxW+"px";

            //boxs[i]styleleft=boxs[minHindex]offsetLeft+"px";

            boxHarr[minHindex]=boxHarr[minHindex]+boxs[i]offsetHeight;

        }

    }

}

function getByClass(parent,clsName){

    a=parentgetElementsByTagName('');

    var arr=[];

    for(var i=0;i<alength;i++){

        if(a[i]className==clsName){

            arrpush(a[i]);

        }

    }

    return arr;

}

function getminHindex(arr,minH){

    

    for(var i in arr){

        if(arr[i]==minH)

            return i;    

    }

}

以上就是关于VUE3中Class 与 Style 绑定全部的内容，包括:VUE3中Class 与 Style 绑定、vue怎么获取dom元素、.vue组件中获取DOM元素问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！