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
The role and methods of information communication in website visual design (picture and text)
Contemporary web visual design has gone through th...
Three implementation methods of Mysql copy table and grant analysis
How to quickly copy a table First, create a table...
Installing linux7.2 Internet access configuration tutorial on VMware virtual machine under win7
Install linux7.2 Internet access configuration on...
Complete steps to solve 403 forbidden in Nginx
The webpage displays 403 Forbidden Nginx (yum ins...
How to solve the error of connecting to the database when ServerManager starts
Servermanager startup connection database error R...
Mysql inner join on usage examples (must read)
Grammatical rules SELECT column_name(s) FROM tabl...
CSS to change the size (width, height) of the image when the mouse passes over the image hyperlink
How to change the image hyperlink when the mouse p...
Key features of InnoDB - insert cache, write twice, adaptive hash index details
The key features of the InnoDB storage engine inc...
Detailed explanation of asynchronous iterators in nodejs
Table of contents Preface What are asynchronous i...
Design sharing of the download page of the Pengyou.com mobile client (picture and text)
Let's first look at some simple data: Accordin...
Using nginx + fastcgi to implement image recognition server
background A specific device is used to perform i...
IE8 uses multi-compatibility mode to display web pages normally
IE8 will have multiple compatibility modes . IE pl...
Implementation example of Nginx+Tomcat load balancing cluster
Table of contents introduction 1. Case Overview 2...
How to modify the root password of mysql in docker
The first step is to create a mysql container doc...
Vue two fields joint verification to achieve the password modification function
Table of contents 1. Introduction 2. Solution Imp...