Summary of the use of Vue computed properties and listeners
1. Computed properties and listeners1.1 Computed properties
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
/*
// equivalent to reversedMessage: {
get(){
return this.message.split('').reverse().join('')
}
}
*/
}
});
</script>
</body>
</html>
Explanation: We defined the computed property reversedMessage in the computed property. The function provided here will be used as the getter function of the computed property reversedMessage. 1.2 SettersComputed properties have only a getter by default, but we can provide a setter.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
<input type="text" v-model="reversedMessage" />
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello'
},
computed: {
reversedMessage: {
get(){
return this.message.split('').reverse().join('')
},
set(value){
this.message = value.split('').reverse().join('')
}
}
}
});
</script>
</body>
</html>1.3 Caching
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
<p>{{ reversedMessage1() }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
reversedMessage1: function(){
return this.message.split('').reverse().join('')
}
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
</body>
</html>
Note: Although the same effect can be achieved with both computed properties and methods, computed properties are cached based on their reactive dependencies. They are only re-evaluated when the associated reactive dependencies change. 1.4 Listening propertiesYou can listen to data changes through the watch property of the Vue instance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="reverse=!reverse">Reverse</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Vue',
reverse: false
},
watch:
// message: function(newVal, oldVal){
reverse: function(newVal){
console.log(newVal)
this.message = this.message.split('').reverse().join('')
}
},
});
</script>
</body>
</html>We can achieve the same effect through the instance attribute vm.$watch.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="reverse=!reverse">Reverse</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue',
reverse: false
}
});
// vm.$watch('reverse', function (newVal, oldVal) {
vm.$watch('reverse', function (newVal) {
console.log(newVal)
this.message = this.message.split('').reverse().join('')
});
</script>
</body>
</html>The above is the detailed content of the summary of the use of Vue calculated properties and listeners. For more information about Vue calculated properties and listeners, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: How to manage docker through UI
>>: MySQL implements a function similar to connect_by_isleaf MySQL method or stored procedure
Recommend
Use docker to deploy tomcat and connect to skywalking
Table of contents 1. Overview 2. Use docker to de...
How to use Zen coding in Dreamweaver
After I published my last article “Zen Coding: A Q...
Detailed tutorial on using Docker to build Gitlab based on CentOS8 system
Table of contents 1. Install Docker 2. Install Gi...
Reasons and solutions for prompting to save action after uploading files in form
The json data must be returned in html format That...
Docker View JVM Memory Usage
1. Enter the host machine of the docker container...
js method to realize shopping cart calculation
This article example shares the specific code of ...
How to transfer files between Windows and Linux
File transfer between Windows and Linux (1) Use W...
Two ways to use IIS to call X-Forwarded-For Header (XFF) to record the visitor's real IP
Problem: The website published through IIS is pla...
Detailed explanation of flex layout in CSS
Flex layout is also called elastic layout. Any co...
Detailed explanation of the problem of matching even when there is a space at the end of the string in the Mysql query condition
1. Table structure TABLE person id name 1 you 2 Y...
Some suggestions for ensuring MySQL data security
Data is the core asset of an enterprise and one o...
Explain TypeScript mapped types and better literal type inference
Table of contents Overview Using mapped types to ...
Basic Implementation of AOP Programming in JavaScript
Introduction to AOP The main function of AOP (Asp...
Solution to the automatic stop of MySQL service
This article mainly introduces the solution to th...
How to Find the Execution Time of a Command or Process in Linux
On Unix-like systems, you may know when a command...