current position:Home>Vue class & Style binding and computed
Vue class & Style binding and computed
2022-04-29 15:13:16【Elephants and ants】
1. class binding
<div :class="['el-notification', customClass, horizontalClass]"
</div>
computed: {
typeClass() {
return this.type && typeMap[this.type] ? `el-icon-${
typeMap[this.type] }` : '';
},
horizontalClass() {
return this.position.indexOf('right') > -1 ? 'right' : 'left';
},
}
2. style binding
<div
:class="['el-notification', customClass, horizontalClass]"
v-show="visible"
:style="positionStyle"
@mouseenter="clearTimer()"
@mouseleave="startTimer()"
@click="click"
role="alert"
>
</div>
computed: {
positionStyle() {
return {
[this.verticalProperty]: `${
this.verticalOffset }px`
};
}
}
copyright notice
author[Elephants and ants],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291513145928.html
The sidebar is recommended
- Introduction to basic methods of math built-in objects in JavaScript
- JavaWeb Tomcat (III) httpservlet
- Vue Za wiper technical scheme
- Differences, advantages and disadvantages between HTTP negotiation cache Etag and last modified
- After taking tens of millions less, the management of Lenovo holdings took the initiative to reduce the salary by 70%
- What if Vue introduces this file and reports an error?
- Use Hikvision Web3 in vue3 2. Live broadcast without plug-in version (II)
- How to learn high-order function "zero basis must see"
- Detailed explanation of JS promise
- Cesium drawcommand [1] draw a triangle without talking about the earth
guess what you like
The role of webpack cli in webpack packaging
Action system of coco2d-x-html5
Vxe table check box paging data memory selection problem
[hand tear series] hand tear promise -- this article takes you to realize promise perfectly according to promise a + specification!
QT use qdialog to realize interface mask (mask)
Differences between JSP comments and HTML comments
Bankless: Ethereum's data report and ecological highlights in the first quarter of 22 years
Spring mvc07: Ajax research
Understand the basic history and knowledge of HTTP
JQuery realizes picture switching
Random recommended
- Technology sharing | learning to do test platform development vuetify framework
- Technology sharing | test platform development - Vue router routing design for front-end development
- Return to the top - wepy applet - front end combing
- Install less / sass
- Node. JS basic tutorial
- Have you learned how to use Vue?
- The front end can't calm me down
- Introduction to JavaScript
- Vue
- Technology sharing | learning to do test platform development vuetify framework
- Vue starts with an error and prompts NPM install core- [email protected] // oryarn add core- [email protected]
- STM32 + esp8266 + air202 basic control chapter - 201 - server reverse proxy - server installation nginx (. Windows system)
- STM32 + esp8266 + air202 basic control chapter - 205 - server reverse proxy - Web server configuration HTTPS access (. Windows system)
- Element after the spring frame assembly is opened, the scroll bar returns to the top
- Java project: nursing home management system (java + springboot + thymeleaf + HTML + JS + MySQL)
- Java project: drug management system (java + springboot + HTML + layui + bootstrap + seals + MySQL)
- What are the similarities and differences between jQuery and native JS?
- The starting price is less than 90000 yuan, and the National University's seven seat super value SUV xinjietu x70s is officially pre sold
- Fastadmin modifies the list width (limit the list width, support CSS writing), and the width limit. It is too large or useless.
- Learning ajax in Vue is enough
- Rasa dialogue robot serial 7 lesson 122: rasa dialogue robot debugging project practical bank financial dialogue robot whole life cycle debugging practice - (III)
- CSS foundation-15-drop-down menu
- Only one message prompt pops up in the element UI at a time
- Leetcode 82. Delete duplicate elements in the sorting linked list II
- This beast was blessed with skills to test drive the DHT version of Harvard beast
- Vue Click to switch the background color randomly (small demo)
- In the era of man-machine war, how did Beijing magic cube and artificial intelligence produce chemical reaction
- About nginx + Nacos using domain name connection invalid things
- How strong is the giant wave hybrid blessing when GAC motor shadow cool makes its global debut?
- Layui framework application FAQ
- Layui style optimization
- Post request (http-c4e7.post)
- Is low code a blessing or a challenge for programmers?
- Use the pointer of the array to test the relationship between the two-dimensional elements and the column of the array in the order of "% 1-6", and then use the pointer of the array to output the data in the order of "% 1-6", and then use the pointer of t
- 6-2 pointer and the sum fraction of each column of array matrix 10 this problem requires the implementation of a function to find the sum of each column of a two-dimensional array with n (less than 10) rows and 7 columns. The columns and are stored in a o
- 7-1 find the specified element in the array
- When using uniapp for e-commerce projects, vuex is used to realize the global sharing of data to make shopping cart pages
- JQuery Basics
- `JQuery ` advanced
- Do not leave the market unless necessary! Zhongshan City issued specific requirements for campus epidemic prevention after the May Day holiday