计算属性computed案例、动态绑定css样式案例课外拓展

一、点击按钮添加
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