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
Correct way to write empty links to prevent page jumps after clicking a href # problem
Sometimes you need to use links, but you don't...
Vue imitates Ctrip's carousel effect (sliding carousel, highly adaptive below)
Let's look at the case first. Use vue+swiper ...
How to Communicate with Other Users on the Linux Command Line
It's easy to send messages to other users in ...
Detailed explanation of MySQL user rights verification and management methods
This article uses examples to illustrate how to v...
HTML form tag tutorial (5): text field tag
<br />This tag is used to create a multi-lin...
Solution to the problem that the MySQL database cannot be accessed by other IP addresses
Preface Still referring to the project mentioned ...
Summary of common docker commands (recommended)
1. Summary: In general, they can be divided into ...
Will this SQL writing method really cause the index to fail?
Preface There are often some articles on the Inte...
Ten Experiences in Presenting Chinese Web Content
<br /> Focusing on the three aspects of text...
Use of Linux date command
1. Command Introduction The date command is used ...
Master-slave synchronization configuration and read-write separation of MySQL database
The benefits of using MySQL master-slave replicat...
Detailed explanation of command to view log files in Linux environment
Table of contents Preface 1. cat command: 2. more...
Transplanting the mkfs.vfat command in busybox under Linux system
In order to extend the disk life for storing audi...
CSS menu button animation
To write a drop-down menu, click the button. The ...
JavaScript parseInt() and Number() difference case study
Learning objectives: The two functions parseInt()...