How to use dynamic parameters and calculated properties in Vue

How to use dynamic parameters and calculated properties in Vue

1. Dynamic parameters

Starting from 2.6.0, you can use a JavaScript expression enclosed in square brackets as a directive argument:

<a v-bind:[attributeName]="url"> …

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:

<a v-on:[eventName]="doSomething"> …

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 properties

Expressions 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:

{{ message.split('').reverse().join('') }}

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>

Summarize

This 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:
  • Detailed explanation of calculated properties, monitoring properties and life cycle in Vue.js
  • Introduction to Computed Properties in Vue
  • Computed properties and data acquisition methods in Vue
  • Computed properties and monitoring properties in Vue
  • Vue calculation properties and function selection

<<:  Summary of common Linux distribution mirror source configuration

>>:  MySQL 5.7.25 installation and configuration method graphic tutorial

Recommend

jQuery to achieve sliding stairs effect

This article shares the specific code of jQuery t...

HTML table markup tutorial (42): horizontal alignment attribute of the table header ALIGN

In the horizontal direction, you can set the alig...

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial under windows

This article shares the installation and configur...

Introduction to ufw firewall in Linux

Let's take a look at ufw (Uncomplicated Firew...

In-depth analysis of MySQL execution plans

Preface In the previous interview process, when a...

MySQL data archiving tool mysql_archiver detailed explanation

Table of contents I. Overview 2. pt-archiver main...

Web page comments cause text overflow in IE

The experimental code is as follows: </head>...

Detailed explanation of the use of find_in_set() function in MySQL

First, let’s take an example: There is a type fie...

Detailed explanation of Nginx timed log cutting

Preface By default, Nginx logs are written to a f...

A practical tutorial on building a fully distributed Hadoop environment under Ubuntu 16.4

Preface This article mainly introduces the releva...

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

1. Time difference functions (TIMESTAMPDIFF, DATE...

How to implement batch deletion of large amounts of data in MySQL large tables

The question is referenced from: https://www.zhih...

CSS3 realizes various graphic effects of small arrows

It’s great to use CSS to realize various graphics...

Various problems encountered by novices when installing mysql into docker

Preface Recently, my computer often takes a long ...

How to configure common software on Linux

When you get a new Linux server, you generally ha...