一、点击按钮添加
body部分：
<div id="itany">
<h1>Computed 计算属性</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A - {{a}}</p>
<p>B - {{b}}</p>
<p>Age + A = {{addToA}}</p>
<p>Age + B = {{addToB}}</p>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
a:0,
b:0,
age:20
},
methods:{
},
computed:{
addToA:function(){
console.log("Add to A");
return this.a+this.age;
},
addToB:function(){
console.log("Add to B");
return this.b+this.age;
}
}
})
</script>
效果图：
computed计算属性案例.png
二、动态绑定css样式
body部分：
<div id="itany">
<h1>动态 CSS Class</h1>
<h2>示例1</h2>
<div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor}">
<span>jack</span>
</div>
<h2>示例2</h2>
<button v-on:click="changeColor = !changeColor">change color</button>
<button v-on:click="changeLength = !changeLength">change Length</button>
<div v-bind:class="compClasses">
<span>rose</span>
</div>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
changeColor:false,
changeLength:false
},
computed:{
compClasses:function(){
return{
changeColor:this.changeColor,
changeLength:this.changeLength
}
}
}
})
</script>
css部分：
<style>
span{
background:red;
display: inline-block;
padding:10px;
color: #fff;
margin:10px 0;
}
.changeColor span{
background:green;
}
.changeLength span:after{
content:"length";
margin-left:10px;
}
</style>
效果图：
动态绑定css样式.png
