Home > Article > Web Front-end > Detailed explanation of the use of computed and methods
Detailed explanation of the use of computed and methods
- php中世界最好的语言Original
- 2018-05-08 16:03:321691browse
This time I will bring you a detailed explanation of the use of computed and methods. What are the precautions for using computed and methods. The following is a practical case, let’s take a look.
computed and methods
The task of splicing and displaying data can also be completed using methods, but when the data on the page changes, the methods in methods will be Recall (causing unnecessary performance consumption), and the methods in methods will only be called when the data related to itself changes
A simple example
computed is only called during initialization
computed is only called during initialization
methods will be called when the data changes, even if the changed data has nothing to do with itself
testsource
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>computed的使用</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<p id="root">
</p>
<script>
var vm = new Vue({
el: "#root",
data: {
name: "zhaozhao",
age: 13,
hobby: 'Python',
nameAgeStyle: {
fontSize: "20px",
color: "#0c8ac5"
}
},
template: `<p>
<p v-bind:style="nameAgeStyle">computed方式渲染: {{nameAndAge}}</p>
<p v-bind:style="nameAgeStyle">methods 方式渲染: {{getNameAndAge()}}</p>
<br>
<input type="text" v-model="hobby">
<p>爱好: {{hobby}}</p>
<p>{{noUse()}}</p>
</p>`,
computed: {
nameAndAge: {
get(){
console.log('调用computed');
return `${this.name} ==> ${this.age}`;
}
}
},
methods: {
getNameAndAge() {
console.log('调用methods');
return `${this.name} ==> ${this.age}`;
},
noUse(){
console.log("=methods==nouse==");
}
}
})
</script>
</body>
</html>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the use of iview custom verification keyword input box
The above is the detailed content of Detailed explanation of the use of computed and methods. For more information, please follow other related articles on the PHP Chinese website!