计算属性
计算属性指的是通过一系列运算之后,最终得到一个属性值,这个动态计算出来的属性值可以用被模板结构或methods方法使用。
当代码中多次用到某一个属性(不管是字符串还是number类型的值) 就如下代码:
<script src="../lib/vue.js"></script>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
<body>
<div id="app">
<div>
<span> Red 的值:</span>
<input type="text" v-model.number="Red">
</div>
<div>
<span> Green的值:</span>
<input type="text" v-model.number="green">
</div>
<div>
<span> Blue 的值:</span>
<input type="text" v-model.number="blue">
</div>
<hr>
<!-- 以下 拼接字符串`rgb(${Red}, ${green}, ${blue})` 中的 ` 不能写作单引号形式 'rgb(${Red}, ${green}, ${blue})'-->
<div class="box" :style=" { backgroundColor:`rgb(${Red}, ${green}, ${blue})`}">
{{ `rgb(${Red}, ${green}, ${blue})` }}
</div>
<button @click="show"> 记录 </button>
</div>
<script>
var Vm = new Vue({
el:"#app",
data:{
Red:0,
green:0,
blue:0
},
methods:{
show() {
console.log(`rgb(${this.Red}, ${this.green}, ${this.blue})`)
}
}
}
)
</script>
上面代码中有3出用到:rgb(${Red}, ${green}, ${blue}),这样就造成代码冗余。如果要修改某一个字符则要修改多处实在不是最优的方式。 so Vue中就专门为此搞了一个节点叫做 计算属性节点 — computed,优点:实现了代码复用,只要计算属性中依赖的数据源变化了,则计算属性会自动更新 !
该节点特点:
- 定义的时候,要当做方法即函数形式
- 使用的时候,要当做普通属性使用就行
则上述代码优化后如下:
<script src="../lib/vue.js"></script>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
<body>
<div id="app">
<div>
<span> Red 的值:</span>
<input type="text" v-model.number="Red">
</div>
<div>
<span> Green的值:</span>
<input type="text" v-model.number="green">
</div>
<div>
<span> Blue 的值:</span>
<input type="text" v-model.number="blue">
</div>
<div class="box" :style=" { backgroundColor:rgb}">{{ rgb }} </div>
<button @click="show"> 记录 </button>
</div>
<script>
var Vm = new Vue({
el:"#app",
data:{
Red:0,
green:0,
blue:0
},
methods:{
show() {
console.log(this.rgb)//直接当做成属性字符串使用就行
}
},
// 所有的计算属性,都要定义到computed的节点下
computed:{
// 计算属性在定义的时候,要定义成 方法格式即函数
rgb(){
return `rgb(${this.Red}, ${this.green}, ${this.blue})`
}
}
}
)
</script>