第三天(Vue双向数据绑定，computed属性，动态css绑定)

第三天(Vue双向数据绑定，computed属性，动态css绑定)

Vue双向数据绑定

双向数据绑定一般用于input,select,textarea，我们看示例。

 <div id="vue-app">
    姓名: <input ref="username" type="text" v-on:keyup.enter="logName">{{name}}<br>
    年龄: <input v-model="age" type="text">{{age}}
 </div>

new Vue({
    el:"#vue-app",
    data:{
        name:"",
        age:""
    },
    methods:{
        logName:function(){
            this.name=this.$refs.username.value;
        }
    }
})

显示效果

在上面的示例中，HTML中的text于我们的vue对象属性绑定的有两种方式，可以在input这个dom对象中添加一个ref属性，然后可以在js中使用this.$refs.username.value来获取这个值，其中的username是html中对应的ref属性的值;另一种方式是使用v-model=”name”来将这个输入框中的值与对应的name属性来绑定，一旦输入框中的值发生改变，name属性值也会发生改变。

Vue computed属性

还是先从代码开始：

<div id="vue-app">
   <button v-on:click="a++">a+1</button>
   <button v-on:click="b++">b+1</button><br>
   A的值-----{{a}}<br>
   B的值-----{{b}}<br>
   C的值-----{{c}}<br>
   <p>A+C={{addAToC}}</p>
   <p>B+C=={{addBToC}}</p>
</div>

new Vue({
    el:"#vue-app",
    data:{
        a:1,
        b:2,
        c:3
    },
    methods:{
        // addAToC:function(){
        //  console.log("a+c执行");
        //  return this.a+this.c;
        // },
        // addBToC:function(){
        //  console.log("b+c执行");
        //  return this.b+this.c;
        // }
    },
    computed:{
        addAToC:function(){
            console.log("a+c执行");
            return this.a+this.c;
        },
        addBToC:function(){
            console.log("b+c执行");
            return this.b+this.c;
        }
    }
})

上面是使用的computed属性，computed属性与methods相似，大家可以尝试分别注释methods和computed中的代码来查看效果（注意在控制台查看输出），这里我作简单的解释，当以上面的代码执行时，在页面中点击a+1按钮或者b+1按钮的时候，computed属性中的方法只有一个会执行，而当方法是放在methods中，注释computed中的代码时，methods中任何与属性c有关方法都会被执行。至于为什么要有computed这么一个属性，其实我也不是很清楚，我想应该是为了在更复杂更大量的运算中，能够加快运算速度等等，我想这个问题我还有待去学习发掘。

Vue 动态绑定css样式

下面分别是示例的html，css，js代码

<div id="vue-app">
    <!-- <h2>示例1</h2>
    <div v-on:click="ischangecolor=!ischangecolor" v-bind:class="{changecolor:ischangecolor}">
          <span>Henry</span>
    </div> -->

    <h2>示例2</h2>
    <button v-on:click="ischangecolor=!ischangecolor">改变颜色</button>
    <button v-on:click="ischangelength=!ischangelength">改变长度</button>
    <div v-bind:class="compClasses">
       <span>this</span>
    </div>
</div>

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;
}

new Vue({
    el:"#vue-app",
    data:{
        ischangecolor:false,
        ischangelength:false
    },
    methods:{

    },
    computed:{
        compClasses:function(){
            return{
                changecolor:this.ischangecolor,
                changelength:this.ischangelength
            }
        }
    }
})

这里我不知道该怎么组织语言，就算给自己一个笔记点吧，用作自己以后复习用，讲解动态css绑定知识我找到这位老兄的博客可以参考——CLASS与样式绑定