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
How to use macros in JavaScript
In languages, macros are often used to implement ...
Analysis on how to solve the problem of Navicat Premium connecting to MySQL 8.0 and reporting error "1251"
If people have been idle for too long, they will ...
The complete process of iptables rules in Docker being lost after iptables restart
Causes and consequences 1. When using the ansible...
Detailed explanation of Vue mixin usage and option merging
Table of contents 1. Use in components 2. Option ...
Common CSS Errors and Solutions
Copy code The code is as follows: Difference betw...
MySQL foreign key (FOREIGN KEY) usage case detailed explanation
Introduction: The disadvantages of storing all da...
7 Ways to Write a Vue v-for Loop
Table of contents 1. Always use key in v-for loop...
How to make ApacheBench support multi-url
Since the standard ab only supports stress testin...
How to implement draggable components in Vue
This article shares with you how to implement dra...
A brief discussion on MySql views, triggers and stored procedures
view What is a view? What is the role of a view? ...
CSS to achieve floating customer service effect
<div class="sideBar"> <div>...
Overview and differences between html inline elements and html block-level elements
Block-level element features : •Always occupies a ...
Detailed explanation of Javascript Echarts air quality map effect
We need to first combine the air quality data wit...
How to mount the CD to find the rpm package under Linux
Written in front Sometimes you need to install so...
Detailed explanation of lazy loading and preloading of webpack
Table of contents Normal loading Lazy Loading Pre...