Bidirectional binding of Vue

There are three ways to implement bidirectional binding:

1. Use the V-Model directly

<div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
    <script>
        const app = new Vue({
            el: '#app'.data: {
                message: 'hello',}})</script>
Copy the code

2. V-on binding is used

<div id="app">
        <input type="text" :value="message" v-on:input="valueChange">
        {{message}}
    </div>
    <script>
        const app = new Vue({
            el: '#app'.data: {
                message: 'hello',},methods: {valueChange(event){
                    this.message=event.target.value; }}})</script>
Copy the code

3. Methods 3

<div id="app">
        <input type="text" :value="message" @input="message=$event.target.value">
        {{message}}
    </div>
    <script>
        const app = new Vue({
            el: '#app'.data: {
                message: 'hello',},methods: {valueChange(event){
                    this.message=event.target.value; }}})</script>
Copy the code

There are several other uses for bidirectional binding

1. V-model-radio You can do two-way binding with v-model but there’s always a way in radio that you can do radio and if you add the same name attribute to the radio you can only choose one of them

<div id="app"> <input type="radio" id="male" value=" male" V-model ="sex"> male <input type="radio" id="female" value=" female" V-model ="sex"> female <input type="radio" id="female" v-model="sex"> female < h2 > you choose the sex of the {{sex}} < / h2 > < / div > < script > const app = new Vue ({el: '# app, data: {message:' hello, sex: "',},})Copy the code

2. Checkbox Radio User agreement Click Agree to proceed to the next step

<div id="app">
        <label for="agree">
            <input type="checkbox"  id="agree" v-model="isAgree">Agree to a deal</label>
        <h2>Your options are: {{isAgree}}</h2>
        <button :disabled=! "" isAgree">The next step</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app'.data: {
                isAgree:false}})</script>
Copy the code

3. Checkbox Multiple Select Is used to select multiple times to add

<div id="app""> <input type="checkbox" value=" basketball "v-model="hobbies"> <input type=" hobbies" value=" football" v-model="hobbies" Type ="checkbox" value=" badminton "V-model ="hobbies"> badminton <input type="checkbox" value=" table tennis" v-model="hobbies"> {{hobbies}}</h2> </div> <script> const app = new Vue({ el: '#app', data: { isAgree:false, hobbies:[], }, }) </script>Copy the code

4. V-select drop-down menu

<div id="app">
        <select name="ab" v-model="fruit" id="">
            <option value="Banana">banana</option>
            <option value=The word "apple">apple</option>
            <option value="Orange">orange</option>
            <option value="Watermelon">watermelon</option>
        </select>
        <h2>Your choice of fruit is: {{fruit}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app'.data: {
                message:'hello'.fruit: 'banana',}})</script>
Copy the code

5. Select multiple to display all the contents of the drop-down menu by holding down the Ctr key

<div id="app">
        
        <select name="ab" v-model="fruits" id="" multiple>
            <option value="Banana">banana</option>
            <option value=The word "apple">apple</option>
            <option value="Orange">orange</option>
            <option value="Watermelon">watermelon</option>
        </select>
        <h2>Your fruit of choice is {{fruits}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app'.data: {
                message:'hello'.fruit: 'banana'.fruits: [].}})</script>
Copy the code