Vue.js--表单的使用（基本用法、单选按钮、复选框、下拉列表）详解

我会带着你远行 2021-08-13 11:26 323阅读 0赞

#### 基本用法 ####

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。

<div id="app">
       <input type="text" v-model="message" placeholder="输入...">
       <p>输入的内容是：{
       {message}}</p>
    </div>
    <script> var app = new Vue({ el: '#app', data: { message: '' } }); </script>

![在这里插入图片描述][20191011085528361.png]  
使用v-model后，表单控件显示的值**只依赖所绑定的数据**，不再关心初始化时的value属性，对于在< textarea >中插入的值也不会生效。

使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。**如果希望总是实时更新，可以用@input来替代v-model。**

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

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选。

如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用：

<div id="myApp">
        <input type="radio" v-model="picked" value="html" id="html">
        <label for="html">HTML</label>
        <br>
        <input type="radio" v-model="picked" value="js" id="js">
        <label for="js">JavaScript</label>
        <br>
        <input type="radio" v-model="picked" value="css" id="css">
        <label for="css">CSS</label>
        <br>
        <p>选择的项是：{
       {picked}}</p>
    </div>
    <script> var myApp = new Vue({ el: '#myApp', data: { picked: 'js' } }); </script>

![在这里插入图片描述][20191011090935368.png]

#### 复选框： ####

复选框也分单独使用和组合使用，不过用法与单选不同。复选框单独使用时，也是用v-model来绑定一个布尔值。

组合使用时，也是v-model与value一起，多个勾选框都绑定到一个**数组类型**的数据，value的值在数组当中，就会选中这一项。这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中。

<div id="app">
        <input type="checkbox" v-model="checked" value="html" id="html">
        <label for="html">HTML</label>
        <br>
        <input type="checkbox" v-model="checked" value="js" id="js">
        <label for="js">JavaScript</label>
        <br>
        <input type="checkbox" v-model="checked" value="css" id="css">
        <label for="css">CSS</label>
        <br>
        <p>选择的项是：{
       {checked}}</p>
    </div>
    <script> var app = new Vue({ el: '#app', data: checked: ['html', 'css'] } }); </script>

![在这里插入图片描述][2019101109250033.png]

#### 选择列表 ####

选择列表就是下拉选择器，也是常见的表单控制件，同样也分为单选和多选两种方式。

<div id="app">
        <select v-model="selected">
            <option>html</option>
            <option value="js">JavaScript</option>
            <option>css</option>
        </select>
        <p>选择的项是：{
       {selected}}</p>
    </div>
    <script> var app = new Vue({ el: '#app', data: { selected:'html' } }); </script>

option是备选项，如果含有value属性，v-model就会优先匹配value的值；如果没有，就会直接匹配option的text，比如选中第二选项时，selected的值是js，而不是JavaScript。

--------------------

给select标签添加属性multiple就可以多选，此时v-model绑定的是一个数组，与复选框用法类似。 \`\`\`html

html JavaScript css

选择的项是：\{ \{selected\}\}

\`\`\` !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20191011093332521.png)

在业务中，option标签经常用v-for动态输出，value和text也是用v-bing动态输出的：

<div id="app">
        <select v-model="selected" multiple>
            <option v-for="option in options" :value="option.value">{
       {option.text}}</option>
        </select>
        <p>选择的项是：{
       {selected}}</p>
    </div>
    <script> var app = new Vue({ el: '#app', data: { selected:'html', options: [ { text:'HTML', value:'html' }, { text:'JavaScript', value:'js' }, { text:'CSS', value:'css' } ] } }); </script>

![在这里插入图片描述][20191011093847524.png]

[20191011085528361.png]: /images/20210813/991bba2a59a349aaa7295f23d8cc8ca0.png
[20191011090935368.png]: /images/20210813/5ff299b2fd884f2a8823088e7d2ea4af.png
[2019101109250033.png]: /images/20210813/f6c90e8d8c5b4061be2676f02f36a779.png
[20191011093847524.png]: /images/20210813/5f52988a2d4c48f1bb600c9df0c13124.png