Day 3 (Vue Bidirectional Data Binding, Computer Properties, Dynamic css Binding)

Vue Bidirectional Data Binding

Bidirectional data binding is commonly used for input,select,textarea. Let's look at an example.

 <div id="vue-app">
    Name: <input ref="username" type="text" v-on: keyup.enter="logName">{{name} < br>
    Age: <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;
        }
    }
})

Display effect

In the example above, text in HTML binds our vue object properties in two ways. You can add a ref attribute to the input dom object and then use this.$refs.username.value in js to get the value, where username is the value of the corresponding ref attribute in html; the other way is to use v-model= "name" to match the value in the input box with the value in html. The corresponding name attribute binds, and once the value in the input box changes, the name attribute value also changes.

Vue computed attribute

Or start with the code:

<div id="vue-app">
   <button v-on:click="a++">a+1</button>
   <button v-on:click="b++">b+1</button><br>
   A Value-----{{a}}<br>
   B Value-----{{b}}<br>
   C Value-----{{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 implement");
        //  return this.a+this.c;
        // },
        // addBToC:function(){
        //  console.log("b+c implement");
        //  return this.b+this.c;
        // }
    },
    computed:{
        addAToC:function(){
            console.log("a+c implement");
            return this.a+this.c;
        },
        addBToC:function(){
            console.log("b+c implement");
            return this.b+this.c;
        }
    }
})

The above is the computed attribute. The computed attribute is similar to the method. You can try to annotate the code in the method and the computer to see the effect (pay attention to the output in the console). Here I will explain briefly. When the above code is executed, when you click a+1 button or b+1 button in the page, only one method in the computed attribute will execute. When the method is placed in methods and the code in computed is annotated, any method associated with attribute c in methods will be executed. As for why there is such an attribute as computer, I am not very clear. I think it should be in order to speed up the operation in more complex and large amount of operations, and so on. I think this problem still needs to be studied and explored.

Vue Dynamic Binding css Style

The following are the html, css, and js code for the example

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

    <h2>Example 2</h2>
    <button v-on:click="ischangecolor=!ischangecolor">Color change</button>
    <button v-on:click="ischangelength=!ischangelength">Changing length</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
            }
        }
    }
})

Here I don't know how to organize the language, even if I give myself a note for future review, explain the knowledge of dynamic css binding, I can find this brother's blog for reference.—— CLASS and Style Binding