Vue指令篇_v-model_数据双向绑定

目录

1.input

1）type = text（文本框）

2）type = checkbox 复选框

3）type = radio 单选框

2.textarea

3.select

4.v-model的修饰符

1）.lazy

2）.number

3）.trim

---

小桃回来啦，忙一些别的事情，可有一段时间没有学习前端了，还是接着之前的内容写vue的指令，v-model是语法糖，可以在表单元素上创建双向数据绑定，当数据更新时对应元素更新，元素更新时对应数据更新。

1.input

1）type = text（文本框）

<div id="app">
    <input v-model="message">
    <p>Message为：{{ message }}</p>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        message: 'JWH'
    }
})

【结果】可以看到表单元素更新时，数据message也同时更新了

2）type = checkbox 复选框

单个复选框，绑定布尔值，v-model="Boolean"

<div id="app">
    <input type="checkbox"  id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        checked: true
    }
})

【结果】

多个复选框，这种情况是将 v-mode l与一数组绑定，数组中的值为被选中的input框的value值

<div id="app">
    <input type="checkbox" name="" id="zhang" value="张爱玲" v-model="checkedNames">
    <label for="zhang">张爱玲</label>
    <input type="checkbox" name="" id="yang" value="杨绛 v-model="checkedNames">
    <label for="zhang">杨绛</label>
    <input type="checkbox" name="" id="qian" value="钱钟书" v-model="checkedNames">
    <label for="zhang">钱钟书</label>
    <br>
    <span>被选中的人放在checkedNames中，有：{{ checkedNames }}</span>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        checkedNames: []
    }
})

【结果】

3）type = radio 单选框

被绑定的数据和value同步

<div id="app">
    <input type="radio" name="" id="zhang" value="张爱玲" v-model="picked">
    <label for="zhang">张爱玲</label>
    <input type="radio" name="" id="yang" value="杨绛" v-model="picked">
    <label for="zhang">杨绛</label>
    <input type="radio" name="" id="qian" value="钱钟书" v-model="picked">
    <label for="zhang">钱钟书</label>
    <br>
    <span>被选中的人放在checkNames中，有：{{ picked }}</span>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        picked: ''
    }
})

【结果】

2.textarea

<div id="app">
    <p>多行文本为：{{ message }}</p>
    <textarea v-model="message" cols="85" rows="5"></textarea>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        message: ''
    }
})

【结果】

3.select

单选，匹配的值为option中的汉字

<div id="app">
    <select v-model="selected">
        <option>张爱玲</option>
        <option>杨绛</option>
        <option>钱钟书</option>
    </select>
    <span>选择：{{ selected==='请选择'?'':selected }}</span>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        selected: '请选择'
    }
})

【结果】

【注】如果v-model表达式的初始值未能匹配任何选项，<select>元素将被渲染为“未选中”状态。在ios中，这会使用户无法选择第一个选项。因为这种情况下，ios不会触发change事件，因此可以提供一个值为空的禁用选项

多选：绑定一个数组

<div id="app">
    <select v-model="selected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选择：{{ selected }}</span>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        selected: []
    }
})

【结果】

4.v-model的修饰符

1）.lazy

在默认情况下，v-model在每次input事件触发后，将输入框的值与数据进行同步。如果要变为使用change事件同步可以添加lazy修饰符

2）.number

自动将用户的输入值转换为数值类型

3）.trim

自动过滤用户输入的首尾空白字符