“This is the 17th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
preface
The last article talked about CSS animations. This article looks at how VUE does anchor jump, as well as some recent VUE template method summary summary
Anchor point jump
Anchor jump refers to clicking on an element on a web page that slides the page up and down to a specified location. JQuery uses the node selector to select the tag that you want to jump to.
< a class = "nav - jump" href = "# jump_target" > < p > jump < / p > < / a >Copy the code
But our data is dynamically rendered, so we can’t write this, but the principle is the same, we need to add string spelling to these places, look at the following code:
<div id="only_menu"> <! -- Sit side large menu button, Used to slide on the right side of the menu to the specified location - > < ul id = "menu_list" > < li v - for = "item in url_lists:" key = "item. Id" > < a: href = "' # '+ item. The Name" > < div > {{ item.Name }}</div></a> </li> </ul> </div>Copy the code
Target jump tag position:
<div id="part_right"> <! - site navigation bar on the right side - > < ul id = "url_list" > < li v - for = "item in url_lists:" key = "item. Id" > <! -- v:for nested loop, inside loop can not locate element with id, Use class --> <div class="one_part"> <div class="menu_target" :id='item.Name'>{{item.Name}}</div> <div class="url_list_data card"> <li v-for="url_data in item.UrlLists" :key="url_data.ID" class="data-container" > <a :href="url_data.URL" class="btn">{{ url_data.Name }}</a> </li> </div> </div> </li> </ul> </div>Copy the code
Effect achieved:
v:bind
<a :href="'#'+ item.Name "><div >{{ item.Name }}</div></a>
Copy the code
I’ve put an A tag here, the colon in the :href is short for V-bind, full form:
<a v-bind:href="'#'+ item.Name "><div >{{ item.Name }}</div></a>
Copy the code
The href attribute of the A tag is dynamic and is controlled by the Vue object. You can then use the following item.Name to change the href attribute. This # is a common id selector, because there are different names in vue’s list loop to jump to, and class controls the ability to do many of the same tag attributes. This is the only one, so you use class, and then v-bind, To assign the dynamic ID attribute to the jump target, let’s look at the actual code for the final page:
v:for
In addition to the v:bind template method, this page also has a v-for template method. In this page I use V-for, which is a vUE list loop method that dynamically renders HTML tags based on data and is one of the most common methods in VUE. Key is now required and unique when using V-for in VUE 2.2.2+, otherwise the console will report an error. Use {{}} in the list loop to represent the variables of the looping render.
conclusion
This page uses vUE template method only two, vUE in addition to template method is some vUE object some built-in methods, built-in properties are actually very complex, such as monitoring, calculation, event processing, excessive, components, behind slowly understand learning, do some basic understanding first.