Calculate properties
Computational properties are used to handle complex business logic
Computing attributes have dependencies, computing attributes depend on the initial value in data. Only when the initial value changes will the computing attributes be calculated again.
The calculation attribute is generally written as a function and returns a value. This value has a dependency. Only when the dependency value changes, it will recalculate it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form input binding</title>
</head>
<body>
<div >
{{ reverseMsg }}---- {{ reverseMsg }}-------- {{ reverseMsg }} //The function in the calculation attribute is the required data
</div>
</body>
<script src=""></script> // vue's js, otherwise the vue syntax will not be used<script>
const app = new Vue({
el: '#app',
data: {
msg: 'hello world'
},
computed: {
reverseMsg () { // Calculate attribute is a function that returns a value, using the same options as in data ('computed') // Execute 1 time --- Dependency return ('').reverse().join('');
}
}
})
</script>
</html>
Listening attributes (listening attributes)
vue provides an attribute to detect data changes. Watch can obtain the value after the change through newVal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form input binding</title>
</head>
<body>
<div >
<input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = {{ fullname }}
</div>
</body>
<script src=""></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstname: 'plum',
lastname: 'Little Dragon',
fullname: 'Bruce Lee'
},
watch: { // Listen to properties firstname (newVal, oldVal) { // The value after newVal changes = newVal + // Execute when changing last name },
lastname (newVal, oldVal) {
= + newVal // Execute when changing the name }
}
})
</script>
</html>
The above is the detailed content of the computed attributes and listening attributes in vue. For more information about vue computed attributes and listening attributes, please pay attention to my other related articles!