mounted(){
setTimeout(()=>{
this.contentToggle();
},1000)
}, methods:{
contentToggle(){
console.log(this.$refs.bodyFont.offsetHeight);
}
}

vue Want to get dom The height of the elements , Generally speaking, we can think of writing in mounted In the function , namely dom Get it after loading , But it didn't work out as we thought , I thought of using another

this.$nextTick(()=>{
// function 
})

To get , It's no use finding out /..

So a good idea is to use a setTimeout Timer , The time can be set to 0, But sometimes it works , Sometimes it doesn't work , It's safer to add a small time value , In this way, we can ensure that what we get must be dom After loading, the , This principle applies to vue There are a lot of value transfer problems in , At the beginning, I couldn't get the value that I passed , Use one setTimeout Can be .

vue obtain dom More articles on element attention

  1. vue obtain dom Element content

    adopt ref To get dom Elements stay vue On the official website ref The explanation of ref  Used to register reference information for an element or subcomponent . The reference information will be registered in the  $refs  On the object . If in the ordinary DOM Use on element , The reference points to D ...

  2. vue obtain dom The method of element height

    Get height : <div ref=" Custom name " > </div> It's on the hook mounted Inside dom After the structure is generated, get dom Height , Width , Modify the style and other operations !!! mo ...

  3. Vue obtain DOM The attribute value of the element

    We need to make a small shell layer in the project , Here's the picture : I need to know the value of the distance from the top of the click element , And then calculate the shell level top value , Here's the picture : stay vue How to get the DOM The distance between the element and the top of the window ? 1. adopt $event obtain html: <di ...

  4. vue obtain DOM Element and set properties

    I think of it here 2 A way : Method 1 : Add... Directly to the corresponding element id, And then again document.getElementById("id"); obtain , Then set the corresponding properties or styles Method 2 : Use ref, Give me a picture ...

  5. Vue obtain dom Elements

     <li  @click=' obtain li label '    :ref="center-li" id="center-li"      > ===== I am a li mark ...

  6. Vue obtain DOM Elements ref

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue obtain DOM Element style &amp;&amp; Style change

    stay vue of use document obtain dom When a node changes its node style, it may appear 'style' is not definde Error of , At this time, it can be in mounted In the use $refs To get samples ...

  8. Vue obtain dom Element of ref and $refs Detailed explanation

    One .$refs An object , hold ref All registered elements or subcomponents .( Registered ref Set ) Two .ref Used to register reference information for an element or subcomponent . If used in dom Element , The reference points to dom Elements : If it's used on subcomponents , ...

  9. Vue obtain dom Custom attribute values in the element

    Method 1 : HTML <div id="app"> <button @click="getData($event,'100')"> Am I &l ...

Random recommendation

  1. php Write daemons (Daemon)

    Daemon (Daemon) It's a special process running in the background . It is independent of the control terminal and periodically performs certain tasks or waits to handle certain events . Daemons are very useful processes .php You can also implement the functions of the daemons . 1. Basic concepts process ...

  2. ZOJ 3659 &amp; HDU 4424 Conquer a New Region ( Union checking set )

    A little greedy thinking is needed in this problem , Because the carrying capacity from one point to another depends on the minimum weight of the edges between them , So first, line segments are arranged in order of weight from large to small , Every time the edge is smaller than before , And then when you merge the sets , Compare x = findset(a) Make a root or y ...

  3. prohibit UINavigationController Left slide The effect of return

    stay iOS7 in , A little new function has been added , That's it :self.navigationController.interactivePopGestureRecognizer.enabled = YES;

  4. code forces Watermelon

    /* * Watermelon.cpp * * Created on: 2013-10-8 * Author: wangzhu */ /** * if n It's even , And greater than 2, The output YES, * Otherwise output NO ...

  5. Nine degrees OJ 1435 Miasma

    Title address :http://ac.jobdu.com/problem.php?pid=1435 Title Description : Through the cliff yifenfei, Facing the test of the valley again —— Miasma pervades the valley , The silence is terrible , You can see that the ground is full of ...

  6. Android Monitor return key

    android In development , Events after the monitor key returns are often used to , Here's an example of what android Return key event listener . public class BackKeyTest extends Activity { / ...

  7. understand iOS Software development framework

    iOS Software development framework understanding This thing is a hard wound , frame ? Self contained mvc? Self contained UIViewController UIView UINavigationController Do these count as ? Of course it does ,cocoa Frame ...

  8. JavaScript practice 2

    Today I did some JS Array exercises One . Insert a number into the array var attr = [1,2,3,4,5,6]; var c = 7; for(var i=0;i<attr.length;i++) { ...

  9. About Kafka __consumer_offests The discussion of the

    as everyone knows ,__consumer__offsets It's an interior topic, Transparent to users , In addition to its data files and occasional presence in the log , Users generally don't feel this topic Of . But we do know that what it keeps is ...

  10. JEECG Use... In the framework Flash edition Uploadify, stay Chrome Version number 70 The solution to the problem of not being able to start

    Thank you for the article :https://www.cnblogs.com/zinan/p/6902427.html Open separately IFRAME Pages in Click on the < unsafe > And then refresh alone IFRAME The page of , Can be ...