1.1.1计算属性作用
-
模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
-
计算属性是基于它们的响应式依赖进行缓存的
-
computed 比较适合对多个变量或者对象进行处理后返回一个结果值,也就是说 多个变量中的某一个值 发生了变化 则 我们监控的这个值也就会发生变化。
computed 是一个对象,这个对象里 可以写 很多 方法。
vue计算(计算属性)vue中computed的作用:从"已经有的数据"计算 出新的数据 (渲染到 视图层去使用!)。
(1)计算属性 在computed对象中写
computed:{
//自定义 若干个属性
}
(2)自定义一个计算属性,把计算属性的具体作用,写在function函数中,function中处理的数据,一定是data数据中心中已经有的数据, 对已有的数据,进行处理,处理得到的新值,然后渲染显示到视图层中。
computed:{
//自定义 若干个属性
属性名1:function(){}
}
1.1.2基本用法
使用计算属性,实现字符串的翻转
<div id="app">
<h1>原字符串:{{msg}}</h1>
<h1>反转之后的字符串:{{reverseMsg}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
msg:'hello vuejs'
}
},
computed:{
//自定义一个 计算属性名
//计算属性 依赖的是数据中心的数据
reverseMsg(){
console.log(this.msg.split(''));
return this.msg.split('').reverse().join('')
}
},
methods:{
}
})
</script>
预览:
1.1.3和方法有什么区别
-
两者的执行结果是完全相同的
-
计算属性 是基于他们的依赖进行缓存的,只有在相关依赖发生改变时,他们才会重新求值,也就是说,只要他的依赖没有发生变化,那么每次访问的时候计算属性都会立即返回之前的计算结果,不再执行函数
-
每次触发重新渲染时,调用方法将总会再次执行函数
<div id="app">
<h1>输入0-100之间数的和</h1>
<h1>{{Total}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
num:100
}
},
computed:{
//自定义一个 计算属性名
//计算属性 依赖的是数据中心的数据
//监听数据中心num这个值的变化
Total(){
var total=null;
for(var i=0;i<=this.num;i++){
total+=i
}
console.log(total);
// 这里一定要有return 否则 调用 Total 的 时候无法拿到结果
return total
}
},
methods:{
}
})
</script>
预览:
课后思考:
自定义一个计算属性, 实现 功能 :字符串 tom 变成 首字母 大写的 Tom
<div id="app">
<h1>原字符串:{{uname}}</h1>
<hr>
<h1>字符串首字母转大写:{{upper}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
uname:'hxxh'
}
},
computed:{
//自定义一个 计算属性名
//计算属性 依赖的是数据中心的数据
upper(){
console.log(this.uname.charAt(0).toUpperCase());
console.log(this.uname.substr(1))
return this.uname.charAt(0).toUpperCase()+this.uname.substr(1)
}
},
methods:{
}
})
</script>
预览: