1.computed定义
computed(计算属性)
可用于快速计算视图(View)中显示的属性
2.computed语法
computed:{
属性名(){
值
}
}
3.computed部分用法
(1)计算总和
例:随机给数组添加一个数字,然后计算数组内总和
<div id="app">
<button @click="arr.push(Math.random()*10)">添加一个数字</button>
计算和:{{getSum}}
</div>
<script>
new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5]
},
computed: {
getSum() {
var sum = 0
this.arr.forEach(i => {
sum += i
});
return sum
}
}
})
(2)反转字符串
例:input输入框内随机输入,下边显示反转好的字
<div id="app">
<input type="text" v-model="val">
<p>{{rever}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
val: ''
},
computed: {
//反转字符串方法
rever() {
return this.val.split('').reverse().join('')
}
}
})
</script>