七.vue基础-表单输入绑定

àì夳堔傛蜴生んèń 2023-06-21 03:50 17阅读 0赞

### 文章目录 ###

*   *  七.vue基础-表单输入绑定
     *   *  一.基础用法
         *   *  文本
             *  多行文本
             *  复选框
             *  单选按钮
             *  选择框
         *  二.值绑定

## 七.vue基础-表单输入绑定 ##

### 一.基础用法 ###

1.  可以使用`v-model`指令在表单`<input>`、`<textarea>`及`<select>`元素上创建双向数据绑定.
2.  `v-model`会忽略所有的表单元素的`value`、`checked`和`selected`特性的初始值而总是将Vue实例的数据作为数据来源.

#### 文本 ####

<input v-model="message" placeholder="edit me">
    
    <p>
        Message is: {
       { message }}
    </p>

#### 多行文本 ####

<span>Multiline message is:</span>
    <p style="white-space: pre-line;">
        
        {
       {message}}
    </p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>

在文本区域插值(`<textarea></textarea>`)并不会生效, 应用`v-model`来代替

#### 复选框 ####

1.  单个复选框, 绑定到布尔值:
    
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{
             { checked }}</label>
2.  多个复选框, 绑定到同一个数组:
    
        <div id="example-3">
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="john" v-model="checkedNames">
            <label for="john">john</label>
            <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
            <label for="mike">mike</label>
            <br>
            <span>Checked names: {
             { checkedNames }}</span>
        </div>
    
        new Vue({ 
            el: '#example-3',
            data: { 
                checkedNames: []
            }
        })

#### 单选按钮 ####

<div id="example-4">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked:{
       { picked }}</span>
    </div>

new Vue({ 
        el:"#example-4",
        data:{ 
            picked:''
        }
    })

#### 选择框 ####

1.  单选时:
    
        <div id="example-5">
            <select v-model="selected">
                <option disabled value=''>请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {
             { selected }}</span>
        </div>
    
        new Vue({ 
            el:'example-5',
            data:{ 
                selected:''
            }
        })
2.  多选时(绑定到一个数组):
    
        <div id="example-6">
            <select v-model="selected" multiple style="width:50px;">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <br>
            <span>Selected: {
             { selected }}</span>
        </div>
    
        new Vue({ 
            el: '#example-6',
            data: { 
                selected:[]
            }
        })
3.  用`v-for`渲染的动态选项:
    
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
            {
             { option.text }}
            </option>
        </select>
        <span>Selected:{
             { selected }}</span>
    
        new Vue({ 
            el:'...',
            data: { 
                selected: 'A',
                options: [
                    {  text: 'One', value: 'A' },
                    {  text: 'Two', value: 'B' },
                    {  text: 'Three', value: 'C'}
                ]
            }
        })

### 二.值绑定 ###

对于单选按钮, 复选框及选择框的选项, `v-model`绑定的值通常是静态字符串(对于复选框也可以是布尔值)

<input type="radio" v-model="picked" value="a">
    
    
    <input type="checkbox" v-model="toggle">
    
    
    <select v-model="selected">
        <option value="abc">ABC</option>
    </select>

但是有时我们可能想把值绑定到vue实例的一个动态属性上, 这时可以用`v-bind`实现, 并且这个属性的值可以不是字符串.

[参考文档][Link 1]

[Link 1]: https://vuejs.bootcss.com/v2/guide/