Vue的双向绑定

实现双向绑定有三种方法：

1. 直接使用v-model

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

2. 采用v-on绑定

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

3. 方法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: '你好',
            },
            methods:{
                valueChange(event){
                    this.message=event.target.value;
                }
            }
        })
    </script>

双向绑定还有以下几种用法

1. v-model-radio v-model可以实现双向绑定 但是在radio总还有一种方法可以实现单选 给radio添加相同的name属性 则 只能选择其中一个

<div id="app">
        <input type="radio" id="male" value="男" v-model="sex">男


        <input type="radio" id="female" value="女" v-model="sex">女
        <h2>你选择的性别是{{sex}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好',
                sex: '',
            },
        })

2. checkbox单选用户协议 点击同意才能点击按钮进行下一步

<div id="app">
        <label for="agree">
            <input type="checkbox"  id="agree" v-model="isAgree">同意协议
        </label>
        <h2>你的选择是：{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isAgree:false
            },
        })
    </script>

3. checkbox多选 用于选择多个时间添加

<div id="app">
        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="足球" v-model="hobbies">足球
        <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
        <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        <h2>您的爱好是：{{hobbies}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isAgree:false,
                hobbies:[],
            },
        })
    </script>

4. v-select 下拉菜单

<div id="app">
        <select name="ab" v-model="fruit" id="">
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
            <option value="橘子">橘子</option>
            <option value="西瓜">西瓜</option>
        </select>
        <h2>你选择的水果是：{{fruit}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message:'你好',
                fruit: '香蕉',
            },
        })
    </script>

5. 多选 multiple可以将下拉菜单内容全部显示出来 按住Ctr键进行操作可以进行多选

<div id="app">
        
        <select name="ab" v-model="fruits" id="" multiple>
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
            <option value="橘子">橘子</option>
            <option value="西瓜">西瓜</option>
        </select>
        <h2>你选择的水果是：{{fruits}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message:'你好',
                fruit: '香蕉',
                fruits:[],
            },
        })
    </script>