计算属性
属性检测
计算属性computed 属性检测watch
首次运行 首次不运行
调用时需要在模板中渲染,修改计算所依赖元数据 调用时只需修改元数据
默认深度依赖 默认浅度观测
适合做筛选,不可异步 适合做执行异步或开销较大的操作
计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h3>计算属性</h3>
<!-- 元属性 -->
<div>{{str}}</div>
<!-- 计算属性 -->
<!-- <div>{{cptStr}}</div> 要放在模板中渲染才可以调用-->
<div>{{cptStr}}</div>
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
//元属性
data:{
str:'hello world',
},
computed:{
// key(计算属性):value(fn)
cptStr:function(){
console.log('计算属性运行了')
//计算业务
// return '计算后的值' //计算后的值
return this.str //hello world
}
}
})
</script>
</html>