1 定义：通过一系列的运算后，最终得到一个属性值
2.特点：定义的时候，要被定义为方法，在使用计算属性的时候，当普通的属性用即可。
3.在computed中定义。
<body>
<div id="app">
R:<input type="text" v-model="r">
G:<input type="text" v-model="g">
B:<input type="text" v-model="b">
<hr>
<!--:style代表动态绑定一个样式对象，他的值是一个{ }样式对象-->
<div class="box" :style="{backgroundColor:rgb}">
{{rgb}}
</div>
<button @click="show">按钮</button>
</div>
<!--<script src="../jQuery.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
r:'',
g:'',
b:''
},
methods:{
show(){
console.log(this.rgb)
}
},
computed:{//rgb作为一个计算属性，被定义成了方法格式。
rgb(){
return `rgb(${this.r},${this.g},${this.b})`
}
}
})
console.log(vm)
</script>
</body>上述代码可以通过改变r,g,b的值来控制方块的颜色，通过按钮来输出rgb的值。
1949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
