How to use dynamic parameters and calculated properties in Vue
1. Dynamic parametersStarting from 2.6.0, you can use a JavaScript expression enclosed in square brackets as a directive argument:
Here, attributeName will be dynamically evaluated as a JavaScript expression, and the resulting value will be used as the final parameter. For example, if your Vue instance has a data property attributeName with a value of "href", then this binding will be equivalent to v-bind:href. Likewise, you can use dynamic parameters to bind a handler function to a dynamic event name:
In this example, when the value of eventName is "focus", v-on:[eventName] will be equivalent to v-on:focus. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Parameters</title>
<script src="vue.js"></script>
</head>
<body>
<div id='app7'>
<span v-on:[event_name]='dosomething'>{{msg}}</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#app7",
data:{
msg:100,
event_name:'click'
},
methods:{
dosomething:function(){
this.msg = this.msg + 1
}
}
})
</script>
</html>
2. Calculated propertiesExpressions in templates are very convenient, but they are designed primarily for simple calculations. Putting too much logic in a template can make it cumbersome and difficult to maintain. For example:
At this point, the template is no longer just a simple declarative logic. You have to look at it for a while before you realize that what we want here is to display the reverse string of the variable message. It becomes even more difficult to handle when you want to include this flipped string in multiple places in your template. So, for any complex logic, you should use computed properties.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Computed Properties</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app'>{{value_add}}</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
value:100
},
computed:{ //Similar to methods value_add:function(){
return this.value + 100
}
}
})
</script>
</html>
SummarizeThis is the end of this article about the use of dynamic parameters and calculated properties in Vue. For more relevant Vue dynamic parameters and calculated properties content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Summary of common Linux distribution mirror source configuration
>>: MySQL 5.7.25 installation and configuration method graphic tutorial
Recommend
Description of the writing method of foreach array in Vue and traversal array in js
How to write Vue foreach array and traverse array...
How to use partitioning to optimize MySQL data processing for billions of data
When MySQL queries tens of millions of data, most...
Detailed explanation of the process of building Prometheus+Grafana based on docker
1. Introduction to Prometheus Prometheus is an op...
MySQL 8.0.11 installation tutorial with pictures and text
There are many tutorials on the Internet, and the...
Example of how to create a local user in mysql and grant database permissions
Preface When you install MySQL, you usually creat...
Detailed process analysis of docker deployment of snail cinema system
Environmental Statement Host OS: Cetnos7.9 Minimu...
Detailed use of Echarts in vue2 vue3
Table of contents 1. Installation 2. Use Echarts ...
Analysis of common basic operations of MySQL database [create, view, modify and delete database]
This article uses examples to describe common bas...
How Web Designers Create Images for Retina Display Devices
Special statement: This article is translated bas...
Detailed process of configuring Https certificate under Nginx
1. The difference between Http and Https HTTP: It...
Binary Type Operations in MySQL
This article mainly introduces the binary type op...
MySQL 8.0.16 installation and configuration tutorial under Windows 10
This article shares with you the graphic tutorial...
How to implement encryption and decryption of sensitive data in MySQL database
Table of contents 1. Preparation 2. MySQL encrypt...
Steps and pitfalls of upgrading linux mysql5.5 to mysql5.7
Table of contents Linux MySQL 5.5 upgraded to MyS...
CSS optimization skills self-practice experience
1. Use css sprites. The advantage is that the smal...