【vue核心技术实战精讲】1

    <div id="example-4">
        <label>单选按钮</label>
        <br>
        <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>

</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'input',
            checked: true,
            picked: 'One',
            checkedNames: ['Jack','input']
        }
    })
</script>

##### 效果



![](https://img-blog.csdnimg.cn/direct/9f10e0b82d0846bcbae8424cf642dd66.gif)

#### C、 `复选框 type="checkbox" - 单个复选框，绑定布尔值`


##### 示例

<div id='app'>
    <!-- for="one" 表示绑定id='one'标签-->
    <div id="example-4">
        <label>单个复选框，绑定到布尔值：</label>
        <br>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>

</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'input',
            checked: true,
            picked: 'One',
            checkedNames: ['Jack','input']
        }
    })
</script>

##### 效果



![](https://img-blog.csdnimg.cn/direct/9f10e0b82d0846bcbae8424cf642dd66.gif)

#### D、 `复选框 type="checkbox" - 多个复选框，绑定到数组`


##### 示例

<div id='app'>
    <!-- for="one" 表示绑定id='one'标签-->
    <div id="example-4">
        <label>多个复选框，绑定到同一个数组</label>
        <br>
        <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>

</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'input',
            checked: true,
            picked: 'One',
            checkedNames: ['Jack','input']
        }
    })
</script>

##### 效果



![](https://img-blog.csdnimg.cn/direct/9f10e0b82d0846bcbae8424cf642dd66.gif)

### 3-2、`实战` `<select>`


##### 示例 1：绑定数组

    <label>下拉框（选择框）</label>
    <br>
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <span>Selected: {{ selected }}</span>
    <br>
    
new Vue({
    el: '#app',
    data: {
        selected: 'D'
    }
})

##### 效果



![](https://img-blog.csdnimg.cn/direct/4f7f59c703464b7e9d81ad5232a46060.gif)

##### 示例 2：用 `v-for` 渲染的动态选项

{{ option.text }} Selected: {{ selected }}

new Vue({
el: ‘…’,
data: {
selected: ‘A’,
options: [
{ text: ‘One’, value: ‘A’ },
{ text: ‘Two’, value: ‘B’ },
{ text: ‘Three’, value: ‘C’ }
]
}
})

##### 效果



![](https://img-blog.csdnimg.cn/direct/1f7633dab2a543bf8402d61a25fd628b.gif)

### 3-3、`实战 <textarea>`


##### 示例

    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" rows="8" cols="50"></textarea>

new Vue({
    el: '#app',
    data: {
        message:"1\n" + "2\n" + "3\n" + "4"
    }
})

##### 效果



![](https://img-blog.csdnimg.cn/direct/fe2cf59125854a14a9d4f9d5ae364e86.gif)

### 4、`修饰符`




---


#### `.lazy`


在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 `lazy` 修饰符，从而转为在 `change` 事件\_之后\_进行同步：

#### `.number`


如果想自动将用户的输入值转为数值类型，可以给 `v-model` 添加 `number` 修饰符：

这通常很有用，因为即使在 `type="number"` 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 `parseFloat()` 解析，则会返回原始的值。


#### `.trim`


如果要自动过滤用户输入的首尾空白字符，可以给 `v-model` 添加 `trim` 修饰符：

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页