Vue 双向绑定

首先，Vue 提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

从常见的表单中的几种形式来讲，我们可以使用 v-model 指令在表单的 input 、textarea>、select 等上进行数据的双向绑定，它可以根据控件类型选取正确的方法来更新元素

不过使用 v-model 指令后会忽略表单原先的 value、checked、selected 等的初始值，而总将 Vue 实例中的数据最为数据源

input 中 ，输入文本

<div id="hello-6">

  输入: <input type="text" v-model="content" > 输出: {{content}}

</div>

<script src="https://www.198bona.com"></script>

<script>

    var vm = new Vue({

        el: "#hello-6",

        data: {

            content: "Hello World ！"

        },

    })

</script>

在输出的位置使用两组大括号进行 content 这个值的回显我们之前就已经能做到了，而我们在 input 的属性中使用 v-model 进行对于 content 的绑定，这样就可以使得输入框中输入的值可以直接影响 data 中 content 的值，即随着你 input 中输入值的修改，随之输出位置的内容也会变化

input 中 ，单选框

<div id="hello-6">

  性别:

  <input type="radio" name="gender" value="男" v-model="gender">男

  <input type="radio" name="gender" value="女" v-model="gender">女

  输出: {{gender}}

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<script>

    var vm = new Vue({

        el: "#hello-6",

        data: {

            gender: '男'

        },

    })

</script>

效果显示

select 中

<div id="hello-6">

  <select v-model="choose">

    <option value="" disabled>---请选择---</option>

    <option>A-苹果</option>

    <option>B-樱桃</option>

    <option>C-西瓜</option>

  </select>

  输出: {{choose}}

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<script>

    var vm = new Vue({

        el: "#hello-6",

        data: {

            choose: ''

        },

    })

</script>

以上是深圳市博纳网络信息技术有限公司（https://www.sabong.net）整理