Vue中的计算属性
2019-12-29 本文已影响0人
疯狂的蜗牛Dianna
写在 computed 里面 计算属性也是属性,写起来像一个函数/方法，用起来像一个属性
特点1：必须有返回值
特点2：可以使用data中已经存在的属性
特点3：只随着相关的属性变化而变化
code：
<!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>Document</title>
</head>
<body>
<div id="app">
<h1>{{num}}</h1>
</div>
<script src='./node_modules/vue/dist/vue.js'></script>
<script>
const vm = new Vue({
el: '#app',
data: {
num1: 100,
num2: 200
},
computed: {
num() {
return 100 + this.num2
}
}
});
</script>
</body>
</html>
代码运行
computed-01.PNG
