什么是计算属性?
首先它是一种属性,其次他有计算这个特殊的性质,每次取得他的值的时候,它不像普通属性那样直接返回结果,而是经过计算后再返回结果,同时只要在它的当中引用data中的某个属性,当这个属性发送改变时,计算属性会自动计算重新执行如果我们在视图层中写了太多了逻辑 导致代码的可维护性降低计算属性的语法计算(数据处理)属性(vue实例中的一个属性) 就是可以对data中的数据进行一些数据处理 一条数据在不同位置展
·
首先它是一种属性,其次他有计算这个特殊的性质,每次取得他的值的时候,它不像普通属性那样直接返回结果,而是经过计算后再返回结果,同时只要在它的当中引用data中的某个属性,当这个属性发送改变时,计算属性会自动计算重新执行
如果我们在视图层中写了太多了逻辑 导致代码的可维护性降低
计算属性的语法
计算(数据处理)属性(vue实例中的一个属性) 就是可以对data中的数据进行一些数据处理 一条数据在不同位置展示出不同形态的时候
语法 :
写在与el data methods watch等同级的位置
computed:{
处理完的数据变量(){
return 你的操纵数据的逻辑
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demodiv">
<!-- 你在{{}}中写数据的逻辑处理是没问题的 但是 视图层是展示数据的地方
如果我们在视图层中写了太多了逻辑 导致代码的可维护性降低 -->
<h1>{{text}}</h1>
<h1>{{text.toUpperCase()}}</h1>
<h1>{{text.toUpperCase().substr(1,5)}}</h1>
<h1>计算属性的方式对text进行处理</h1>
<h1>{{uppertext}}</h1>
<h1>{{subtext}}</h1>
</div>
<script>
new Vue({
el:"#demodiv",
data:{
text:"abcdefgijk"
},
methods:{
},
watch:{
},
computed:{
uppertext(){
// 必须
return this.text.toUpperCase()
},
subtext(){
return this.text.toUpperCase().substr(1,6)
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献3条内容
所有评论(0)