您的位置：首页 > Web前端 > Vue.js

【Vue】零基础学习Vue: 第12课 Vue计算属性computed与methods环境的区别

2019-06-29 16:14 731 查看

computed环境内：

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓<input type="text" v-model="a">
名<input type="text" v-model="b">
<br>
{{num}}
{{c}}
</div>

<script>
let vm = new Vue({
el:"#app",
data: {
a:"",
b:"",
c:''
},
//computed 当视图重新渲染时 方法get不会执行
computed: { //存放的是时时计算属性
fn(){
console.log(1111)
this.c = "啦啦啦"
},
num(){
console.log(2222)
return this.a+this.b
}
}
})
</script>
</body>
</html>

运行结果如下：

以下是在methods环境内：

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓<input type="text" v-model="a">
名<input type="text" v-model="b">
<br>
{{num()}}
{{c}}
</div>

<script>
let vm = new Vue({
el:"#app",
data: {
a:"",
b:"",
c:''
},
//methods 当视图重新渲染时 方法会再次 执行
methods: {
fn(){
console.log(1111)
this.c = "啦啦啦"
},
num(){
console.log(2222)
return this.a+this.b
}
}
})
</script>
</body>
</html>

运行结果入下：

小结：

computed：当某变量变化时视图重新渲染调用其他变量的方法不会执行，只有自身内有变量变化的函数才会执行
methods：当某变量变化时视图重新渲染调用其他变量的方法会一起执行

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航