Vue双向绑定

文章目录

• 学习目标
• 文本框绑定
• 单选框绑定
• 复选框绑定
• 列表框绑定

---

学习目标

1. 掌握v-model指令绑定文本框的应用
2. 掌握v-model指令绑定单选框的应用
3. 掌握v-model指令绑定复选框的应用
4. 掌握v-model指令绑定列表框的应用

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、文本框绑定

1.单行文本框

三种修饰符：.lazy，.number，.trim

<div id="app">
    <input type="text" v-model="message"value="Vue">
</div>

2.多行文本框

<div id="app">
    <textarea v-model="message"></textarea>
</div>

---

二、单选框绑定

当选中单选框时，v-model绑定的数据属性的值被设置为该单选框的value值

<div id="app">
    <input type="radio" id="male" value="zhangsan" v-model="name">
    <label for="male">zhangsan</label>
    <br/>
    <input type="radio" id="female" value="lisi" v-model="name">
    <label for="female">lis</label>
    <br/>
    <p>姓名：{{name}}</p>
</div>

---

三、复选框绑定 

复选框单独使用时，v-model绑定的是布尔值，选中时是true，未选中时是false。

<div id="app">
    <h3>复选框单独使用时：</h3>
    <input type="checkbox" id="picked" v-model="text">
    <label for="picked">{{text}}</label>
</div>

四、列表框绑定

单选时，v-model绑定的是选项的值；多选时，v-model绑定的就是数组

<div id="app">
    <select name="" id="" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="梨">梨</option>
        <option value="西瓜">西瓜</option>
    </select>
    <p>您选择的水果是:{{fruit}}</p>
</div>